Angular 4.x template syntax & common directives

20
阅读 Angular 6/RxJS 最新教程,请访问前端修仙之路

模板语法简介

插值表达式

<div>Hello {{name}}</div>

等价于

<div [textContent]="interpolate(['Hello'], [name])"></div>

模板表达式

属性绑定

输入属性的值为常量

<show-title title="Some Title"></show-title>

等价于

<show-title [title]="'Some Title'"></show-title>

输入属性的值为实例属性

<show-title [title]="title"></show-title>

等价于

<show-title bind-title="title"></show-title>

事件绑定

<date-picker (dateChanged)="statement()"></date-picker>

等价于

<date-picker on-dateChanged="statement()"></date-picker>

模板引用变量

<video-player #player></video-player> 
<button (click)="player.pause()">Pause</button>

等价于

<video-player ref-player></video-player>

双向绑定

<input [ngModel]="todo.text" (ngModelChange)="todo.text=$event">

等价于

<input [(ngModel)]="todo.text"> 

*<template>

*ngIf

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

最终转换为

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

*ngFor

<hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes" 
    [hero]="hero">
</hero-detail>

最终转换为

<template ngFor let-hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes">
  <hero-detail [hero]="hero"></hero-detail>
</template>

常用指令简介

NgIf

<div *ngIf="false"></div> <!-- never displayed -->
<div *ngIf="a > b"></div> <!-- displayed if a is more than b -->
<div *ngIf="str == 'yes'"></div> <!-- displayed if str holds the string "yes" -->
<div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->

NgSwitch

有时候需要根据不同的条件,渲染不同的元素,此时我们可以使用多个 ngIf 来实现。

<div class="container">
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div>
</div>    

如果 myVar 的可选值多了一个 'C',就得相应增加判断逻辑:

<div class="container">
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar == 'C'">Var is C</div>
    <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">
      Var is something else
      </div>
</div>

可以发现 Var is something else 的判断逻辑,会随着 myVar 可选值的新增,变得越来越复杂。遇到这种情景,我们可以使用 ngSwitch 指令。

<div class="container" [ngSwitch]="myVar">
    <div *ngSwitchCase="'A'">Var is A</div>
    <div *ngSwitchCase="'B'">Var is B</div>
    <div *ngSwitchCase="'C'">Var is C</div>
    <div *ngSwitchDefault>Var is something else</div>
</div>

NgStyle

NgStyle 让我们可以方便得通过 Angular 表达式,设置 DOM 元素的 CSS 属性。

  • 设置元素的背景颜色
<div [style.background-color="'yellow'"]>
  Use fixed yellow background
</div> 
  • 设置元素的字体大小
<!-- 支持单位: px | em | %-->
<div>
   <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
      red text
   </span>
</div>

NgStyle 支持通过键值对的形式设置 DOM 元素的样式:

<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
   Uses fixed white text on blue background
</div>

注意到 background-color 需要使用单引号,而 color 不需要。这其中的原因是,ng-style 要求的参数是一个 Javascript 对象,color 是一个有效的 key,而 background-color 不是一个有效的 key ,所以需要添加 ''

NgStyle 源码片段
@Directive({selector: '[ngStyle]'})
export class NgStyle implements DoCheck {
  private _ngStyle: {[key: string]: string};
  private _differ: KeyValueDiffer<string, string|number>;

  constructor(
    private _differs: KeyValueDiffers, 
    private _ngEl: ElementRef, 
    private _renderer: Renderer) {}

  @Input()
  set ngStyle(v: {[key: string]: string}) { 
    // <div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
    this._ngStyle = v;
    if (!this._differ && v) {
      this._differ = this._differs.find(v).create();
    }
  }
 
  // 设置元素的样式
  private _setStyle(nameAndUnit: string, value: string|number): void {
    const [name, unit] = nameAndUnit.split('.'); // 截取样式名和单位
    value = value != null && unit ? `${value}${unit}` : value;

    this._renderer.setElementStyle(this._ngEl.nativeElement, name, value as string);
  }
}

NgClass

NgClass 接收一个对象字面量,对象的 key 是 CSS class 的名称,value 的值是 truthy/falsy 的值,表示是否应用该样式。

  • CSS Class
.bordered {
    border: 1px dashed black; background-color: #eee;
}
  • HTML
<!-- Use boolean value -->
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>

<!-- Use component instance property -->
<div [ngClass]="{bordered: isBordered}">
   Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>

<!-- Class names contains dashes -->
<div[ngClass]="{'bordered-box': false}">
   Class names contains dashes must use single quote
</div>

<!-- Use a list of class names -->
<div class="base" [ngClass]="['blue', 'round']"> 
  This will always have a blue background and round corners
</div>

NgFor

NgFor 指令用来根据集合(数组) ,创建 DOM 元素,类似于 ng1ng-repeat 指令

<div class="ui list" *ngFor="let c of cities; let num = index"> 
  <div class="item">{{ num+1 }} - {{ c }}</div>
</div>

使用 trackBy 提高列表的性能

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
    </ul>
    <button (click)="getItems()">Refresh items</button>
  `,
})
export class App {

  constructor() {
    this.collection = [{id: 1}, {id: 2}, {id: 3}];
  }
  
  getItems() {
    this.collection = this.getItemsFromServer();
  }
  
  getItemsFromServer() {
    return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
  }
  
  trackByFn(index, item) {
    return index; // or item.id
  }
}

NgNonBindable

ngNonBindable 指令用于告诉 Angular 编译器,无需编译页面中某个特定的HTML代码片段。

<div class='ngNonBindableDemo'>
    <span class="bordered">{{ content }}</span>
    <span class="pre" ngNonBindable>
      &larr; This is what {{ content }} rendered
    </span>
</div>

Angular 4.x 新特性

If...Else Template Conditions

语法

<element *ngIf="[condition expression]; else [else template]"></element>

使用示例

<ng-template #hidden>
  <p>You are not allowed to see our secret</p>
</ng-template>
<p *ngIf="shown; else hidden">
  Our secret is being happy
</p>

<template> —> <ng-template>

使用示例

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

@Component({
  selector: 'exe-app',
  template: `
   <ng-template #fetching>
      <p>Fetching...</p>
   </ng-template>
   <p *ngIf="auth | async; else fetching; let user">
      {{user.username }}
   </p>
  `,
})
export class AppComponent implements OnInit {
  auth: Observable<{}>;

  ngOnInit() {
    this.auth = Observable
      .of({ username: 'semlinker', password: 'segmentfault' })
      .delay(new Date(Date.now() + 2000));
  }
}

我有话说

使用 [hidden] 属性控制元素可见性存在的问题

<div [hidden]="!showGreeting">
  Hello, there!
</div>

上面的代码在通常情况下,都能正常工作。但当在对应的 DOM 元素上设置 display: flex 属性时,尽管[hidden] 对应的表达式为 true,但元素却能正常显示。对于这种特殊情况,则推荐使用 *ngIf

直接使用 DOM API 获取页面上的元素存在的问题

@Component({
  selector: 'my-comp',
  template: `
    <input type="text" />
    <div> Some other content </div>
  `
})
export class MyComp {
  constructor(el: ElementRef) {
    el.nativeElement.querySelector('input').focus();
  }
}

以上的代码直接通过 querySelector() 获取页面中的元素,通常不推荐使用这种方式。更好的方案是使用 @ViewChild 和模板变量,具体示例如下:

@Component({
  selector: 'my-comp',
  template: `
    <input #myInput type="text" />
    <div> Some other content </div>
  `
})
export class MyComp implements AfterViewInit {
  @ViewChild('myInput') input: ElementRef;

  constructor(private renderer: Renderer) {}

  ngAfterViewInit() {
    this.renderer.invokeElementMethod(
        this.input.nativeElement, 'focus');
    }
}

另外值得注意的是,@ViewChild() 属性装饰器,还支持设置返回对象的类型,具体使用方式如下:

@ViewChild('myInput') myInput1: ElementRef;
@ViewChild('myInput', {read: ViewContainerRef}) myInput2: ViewContainerRef;

若未设置 read 属性,则默认返回的是 ElementRef 对象实例。


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

小豆子的牛儿 · 2017年04月18日

设置元素的背景颜色 那是不是 [style.background-color]="yellow"

回复

0

" ' yellow ' ", 是这样写的,你这么写yellow是变量

前段抓狂者 · 2018年10月08日
0

或者可以在 ts : yellow: string = "yellow"; 也可以

前段抓狂者 · 2018年10月08日
慢慢磨成针 · 2017年06月29日

`<p *ngIf="auth | async; else fetching; let user">

  {{user.username }}

</p>`
这个let user是将auth赋值给变量user的意思吗,这些语法的用法你从哪看的,真实佩服

回复

0

现在官方文档写得挺详细的

semlinker 作者 · 2017年06月29日
0

官网是auth | auth as user 我就觉得你把知识融汇的很好,我看了官网的就只会用as user,说白了就是只会照猫画虎

慢慢磨成针 · 2017年06月29日
NickBoyer · 2017年10月23日

原文说,“以上的代码直接通过 querySelector() 获取页面中的元素,通常不推荐使用这种方式。更好的方案是使用 @ViewChild 和模板变量”

请问通过querySelector获取页面元素会有什么问题,还有通过querySelector获取的元素能否转成Component

回复

0229xiang · 2018年02月09日

this.renderer.invokeElementMethod在Angular v.5.2是不是用this.renderer2 .listen代替?

回复

0

是的

zcrkey · 2018年02月24日
载入中...