阅读 Angular 6/RxJS 最新教程，请访问

模板语法简介

插值表达式

    
     Hello {
   {name}}
    

等价于

模板表达式

属性绑定

输入属性的值为常量

等价于

输入属性的值为实例属性

等价于

事件绑定

等价于

模板引用变量

     Pause

等价于

双向绑定

等价于

* 与 <template>

*ngIf

最终转换为

*ngFor

最终转换为

常用指令简介

NgIf

NgSwitch

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

    
    
     
      Var is A
     
    
     
      Var is B
     
    
     
      Var is something else
     
    

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

    
    
     
      Var is A
     
    
     
      Var is B
     
    
     
      Var is C
     
    
     
            Var is something else      
     
    

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

    
    
     
      Var is A
     
    
     
      Var is B
     
    
     
      Var is C
     
    
     
      Var is something else
     
    

NgStyle

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

• 设置元素的背景颜色

    
       Use fixed yellow background
    

• 设置元素的字体大小

    
    
   
           red text   
    

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

    
        Uses fixed white text on blue background
    

注意到 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
    
     ;  constructor(    private _differs: KeyValueDiffers,     private _ngEl: ElementRef,     private _renderer: Renderer) {}  @Input()  set ngStyle(v: {[key: string]: string}) {     // 
     
          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

    
    
     This is never bordered
    
    
     This is always bordered
    
    
    
        Using object literal. Border {
   { isBordered ? "ON" : "OFF" }}
    
    
    
        Class names contains dashes must use single quote
     
     
         This will always have a blue background and round corners
     
    

NgFor

NgFor 指令用来根据集合(数组) ，创建 DOM 元素，类似于 ng1 中 ng-repeat 指令

    
   
     
      {
   { num+1 }} - {
   { c }}
     
    

使用 trackBy 提高列表的性能

@Component({  selector: 'my-app',  template: `    
    
      
     
{
   {item.id}}
    
    
    Refresh items  `,})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代码片段。

    
    
     {
   { content }}    
           ← This is what {
   { content }} rendered    
    

Angular 4.x 新特性

If...Else Template Conditions

语法

使用示例

      
     
You are not allowed to see our secret
    
  Our secret is being happy

<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: `   
          
     
Fetching...
   
       
      {
   {user.username }}   
  `,})export class AppComponent implements OnInit {  auth: Observable<{}>;  ngOnInit() {    this.auth = Observable      .of({ username: 'semlinker', password: 'segmentfault' })      .delay(new Date(Date.now() + 2000));  }}

我有话说

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

    
       Hello, there!
    

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

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

@Component({  selector: 'my-comp',  template: `        
    
      Some other content 
    
  `})export class MyComp {  constructor(el: ElementRef) {    el.nativeElement.querySelector('input').focus();  }}

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

@Component({  selector: 'my-comp',  template: `        
    
      Some other content 
    
  `})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 对象实例。