美文网首页
3. Angular 语法

3. Angular 语法

作者: 晨曦Bai | 来源:发表于2019-07-25 19:53 被阅读0次

    1. 模板语法

    1. 属性绑定 []

    <input [value]="firstName"> // 把value 属性绑定到表达式firstName
    <div [attr.role]="myAriaRole"> // 把属性(Attribute)role 绑定到表达式myAriaRole 的结果

    2. 插值绑定

    <div title="hello {{ponyName}}"> 把一个属性绑定到插值字符串(如"Hello Seabiscuit")。这种写法等价于<div [title]="'Hello ' + ponyName">
    <p>Hello {{ponyName}}</p> 把文本内容绑定到插值字符串(如"Hello Seabiscuit")。

    3. 双向绑定[( )]

    <my-cmp [(title)]="name"> //
    设置双向绑定。等价于<my-cmp [title]="name" (titleChange)="name=$event">。

    4. 事件绑定

    <button (click)= "readRainbow($event)"> // 当这个按钮元素上的click事件触发时,调用方法readRainbow,并把这个时间对象作为参数传进去

    5. 元素转内嵌模板*myUnless="myExpression"
    这个 * 符号会把当前元素转换成一个内嵌的模板。它等价于: <ng-template [myUnless]="myExpression"><p>...</p></ng-template>
    <p *myUnless="myExpression">...</p>
    
    6. 管道 |
    // 使用名叫myCardNumberFormatter的管道对表达式cardNumber的当前值进行转换。
    <p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>
    
    7. option? 可选
    //安全导航操作符(?)表示employer字段是可选的,如果它是 undefined ,那么表达式其余的部分就会被忽略,并返回 undefined。
    <p>Employer: {{employer?.companyName}}</p>
    
    8. 局部 变量 #varName
    //创建一个局部变量movieplayer,支持在当前模板的数据绑定和事件绑定表达式中访问video元素的实例。
    <video #movieplayer ...>
    <button (click)="movieplayer.play()">
    </video>  
    
    9. svg
    //模板中的 SVG 片段需要给它的根元素加上svg:前缀,以便把 SVG 元素和 HTML 元素区分开
    <svg:rect x="0" y="0" width="100" height="100"/>
    
    // 以<svg>作为根元素时会自动识别为 SVG 元素,不需要前缀。
    
    <svg>
    <rect x="0" y="0" width="100" height="100"/>
    </svg>
    

    2. 内置指令

    以下1- 5 导入
    \color{blue}{import { CommonModule } from '@angular/common';}

    1. *ngIf

    <section *ngIf="showSection"> // 根据showSection表达式的结果,移除或重新创建 DOM 树的一部分。

    2. *ngFor

    <li *ngFor="let item of list">
    //把 li 元素及其内容变成一个模板,并使用这个模板为列表list中的每一个条目item实例化一个视图view。

    3. [ngSwitch]
    // 根据conditionExpression的当前值选择一个嵌入式模板,并据此决定是否替换掉这个 div 的内容。
    <div [ngSwitch]="conditonExpression">
    <ng-template [ngSwitchCase]="case1Exp1">line 1</ng-template>
    <ng-template ngSwitchCase="case2Exp2">line 2</ng-template>
    <ng-template ngSwitchDefault>line 3 </ng-template>
    </div>
    
    4. [ngClass]
    // 根据 map 中的 value 是否为真,来决定该元素上是否出现与 name 对应的 CSS 类。右侧的表达式应该返回一个形如 {class-name: true/false} 的 map。
    <div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
    
    5. [ngStyle]
    // 允许你使用 CSS 为 HTML 元素指定样式。你可以像第一个例子那样直接使用 CSS,也可以调用组件中的方法。
    <div [ngStyle]="{'property': 'value'}">
    <div [ngStyle]="dynamicStyles()">
    
    6. [ngModel]

    <input [(ngModel)]="userName"> // 为表单控件提供双向数据绑定、解析和验证功能。

    相关文章

      网友评论

          本文标题:3. Angular 语法

          本文链接:https://www.haomeiwen.com/subject/xjqkrctx.html