angular模板语法

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
2
3
<li *ngFor="let hero of heroes">
  <span>{{hero.name}}</span>
</li>

15.css类名绑定机制，如下所示：

1
<li [class.selected]="hero === selectedHero">

16.创建一个service，使用下面的命令：

1
ng generate service hero

17.angular模板只会绑定组件的公共属性。