Angular框架中的模板语法和常用指令

• 模板表达式（属性绑定）：

等价于

• 输入属性的值为实例属性：

等价于


// title为外部定义的变量

• 事件绑定：

等价于

• 双向数据绑定：

等价于

• *与template：

1、*ngIf

编译后：

2、*ngFor

编译后：

3、ngSwitch

有时候需要根据不同的条件，渲染不同的元素，此时我们可以使用多个ngIf来实现，但是这种在随着可选项的增加判断条件就会变得复杂化，angular中我们可以使用ngSwitch指令来解决。

    
值为A的something
    
值为B的something
    
值为C的something
    
值为其他的something

4、ngStyle

ngStyle让我们可以更简单的设置DOM元素的CSS属性。
ngStyle支持通过键值对的形式设置DOM元素的样式，background-color需要添加单引号，color不要，因为ngStyle要求参数是js的对象，因为属性必须是一个有效的key。

   // 内容区域


//  源码部分
@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);
  }
}

5、ngClass

ngClass接收一个对象字面量，对象的key是CSS class的名称，value的值是true/false的值。

.style {
  color: '#FFF',
  background-color: '#000'
}
.font {
  font-size: 20px;
  font-weight: 600;
}

//  是否应用该样式
 内容部分 
 内容部分 

// 通过变量判断是否应用该样式

  {{ isUse ? "应用了样式" : "没有应用样式" }}



// 使用样式的类名数组
 
  内容区域

6、ngFor

ngFor指令用来根据数组，创建DOM元素

  
{{ i+1 }} -- {{ item }}

在使用ngFor的时候可以使用trackBy提高列表的性能

@Component({
  selector: 'my-app',
  template: `
    

      
{{item.id}}
    
  `,
})
export class App {

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

7、ngNonBindable
ngNonBindable指令主要是用来告诉编译器无需编译页面中的某段特定的代码部分。

    // 内容区域

8、[hidden]属性
hidden属性可以控制元素的可见性，但是该元素使用flex布局的时候就会出现不生效的情况，这种的话就需要使用*ngIf去销毁与创建DOM元素。

    // 内容区域

注意事项：

1、需要注意的是angular中去遍历对象

直接使用ngFor是无法遍历拿到键值对的，这里有两个做法可以参考：
1、使用自定义的管道符@Pipe可以拿到键值对的形式的数据。
2、使用Object.keys()

interface User {
  name?: string;
  age?:number;
  value?:string;
}

objectKeys = Object.keys;
items:User = { name: 'value 1', age: 20, value: 'value' };


  {{i + ' : ' + items[i]}}

使用这种方法需要现在ts.config.json文件中加入一个配置项：

    "suppressImplicitAnyIndexErrors":true,

image.png

2、直接使用 DOM API 获取页面上的元素

直接通过querySelector()获取页面中的元素，通常不推荐使用这种方式。更好的方案是使用 @ViewChild和模板变量
不推荐的写法：

@Component({
  selector: 'my-comp',
  template: `
    
    
 内容部分 
  `
})
export class MyComp {
  constructor(el: ElementRef) {
    el.nativeElement.querySelector('input').focus();
  }
}

官网建议的格式：

@Component({
  selector: 'my-comp',
  template: `
    
    
 内容部分 
  `
})
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 对象实例