angular模板语法
1.模板语法概览
1.插值语法:绑定属性变量的值到模板中。
1
<p>{{ detail.telNum }}</p>
2.DOM元素属性绑定语法:将属性变量的值绑定到div的title属性上面。
1
<div [title]="name">hello</div>,
3.class类绑定:当isBlue返回true时div会绑定上isBlue这个类名。
1
<div [class.isBlue]="isBlue()">hello</div>
4.style样式绑定:当isRed为ture时,那么button的文字的颜色为红色。
1
<button [style.color]="isRed ? 'red' : 'green'">洪塞</button>
5.事键绑定:
1
(click)="editContract()"
6.双向绑定。
1
[(title)]="name"
7.模板局部变量:模板局部变量name相当于input的实例化对象。
1
<input type="text" #name />
8.管道操作符:形式 输入数据|管道名:管道参数。
1
<p>birthday{{ birthday | date }}</p>
9.模板表达式操作符:值不是必须的,当detail为null的时候也并不会发生异常。
1
<span>{{ detail?.telNum }}</span>
10.星号前缀:使用星号前缀可以简化对结构指令的使用,angular会将带有星号的指令引用替换成带有标签的代码,等同于
1
2<p *myUnless="boolValue">myUnless is false now.</p>
<template [myUnless]="boolValue"><p>now is time</p></template>11.使用ng generate component heros来创建一个组件。
12.每个组件都必须声明在(且只能声明在)一个NgModule中,如果相对input使用ngModel的话,那么就必须在顶层的appModule中import表单的module,叫做FormsModule。
13.一个组件都必须声明也只能声明在一个NgModule中,具体放在declarations数组里面。
14.列表渲染,如下所示:
1 | <li *ngFor="let hero of heroes"> |
15.css类名绑定机制,如下所示:
1 | <li [class.selected]="hero === selectedHero"> |
16.创建一个service,使用下面的命令:
1 | ng generate service hero |
17.angular模板只会绑定组件的公共属性。