- 模板表达式（属性绑定）：
<operator title="Some Title" ></operator >
等价于
<operator [title]="'Some Title'" ></operator >
- 输入属性的值为实例属性：
<operator [title]="title" ></operator >
等价于
<operator bind-title="title" ></operator >
// title为外部定义的变量
- 事件绑定：
<date-picker [dateChanged]="statement()" ></date-picker>
等价于
<date-picker on-dateChanged="statement()" ></date-picker>
- 双向数据绑定：
<input [ngModel]="obj.name" (ngModelChange)="obj.name=$event"></input>
等价于
<input [(ngModel)]="obj.name" ></input>
- *与template：
1、*ngIf
<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>
编译后：
<template [ngIf]="currentHero">
<hero-detail [hero]="currentHero"></hero-detail>
</template>
2、*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>
3、ngSwitch
有时候需要根据不同的条件，渲染不同的元素，此时我们可以使用多个ngIf来实现，但是这种在随着可选项的增加判断条件就会变得复杂化，angular中我们可以使用ngSwitch指令来解决。
<div class="container" [ngSwitch]="你的选择的属性值">
<div *ngSwitchCase="'A'">值为A的something</div>
<div *ngSwitchCase="'B'">值为B的something</div>
<div *ngSwitchCase="'C'">值为C的something</div>
<div *ngSwitchDefault>值为其他的something</div>
</div>
4、ngStyle
ngStyle让我们可以更简单的设置DOM元素的CSS属性。
ngStyle支持通过键值对的形式设置DOM元素的样式，background-color需要添加单引号，color不要，因为ngStyle要求参数是js的对象，因为属性必须是一个有效的key。
<div [ngStyle]="{color: '#FFF', 'background-color': '#CCC'}">
// 内容区域
</div>
// 源码部分
@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);
}
}
5、ngClass
ngClass接收一个对象字面量，对象的key是CSS class的名称，value的值是true/false的值。
.style {
color: '#FFF',
background-color: '#000'
}
.font {
font-size: 20px;
font-weight: 600;
}
// 是否应用该样式
<div [ngClass]="{style : false}"> 内容部分 </div>
<div [ngClass]="{style : true}"> 内容部分 </div>
// 通过变量判断是否应用该样式
<div [ngClass]="{style : isUse}">
{{ isUse ? "应用了样式" : "没有应用样式" }}
</div>
// 使用样式的类名数组
<div class="base" [ngClass]="['style', 'font']">
内容区域
</div>
6、ngFor
ngFor指令用来根据数组，创建DOM元素
<div *ngFor="let item of Array;let i = index">
<div class="item">{{ i+1 }} -- {{ item }}</div>
</div>
在使用ngFor的时候可以使用trackBy提高列表的性能
@Component({
selector: 'my-app',
template: `
<ul>
<li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
</ul>
`,
})
export class App {
constructor() {
this.collection = [{id: 1}, {id: 2}, {id: 3}];
}
trackByFn(index, item) {
return index; // or item.id
}
}
7、ngNonBindable
ngNonBindable指令主要是用来告诉编译器无需编译页面中的某段特定的代码部分。
<div ngNonBindable>
// 内容区域
</div>
8、[hidden]属性
hidden属性可以控制元素的可见性，但是该元素使用flex布局的时候就会出现不生效的情况，这种的话就需要使用*ngIf去销毁与创建DOM元素。
<div [hidden]="!isShow">
// 内容区域
</div>
注意事项：
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' };
<div *ngFor="let i of objectKeys(items);let key = index;">
{{i + ' : ' + items[i]}}
</div>
使用这种方法需要现在ts.config.json文件中加入一个配置项：
"suppressImplicitAnyIndexErrors":true,
image.png
2、直接使用 DOM API 获取页面上的元素
直接通过querySelector()获取页面中的元素，通常不推荐使用这种方式。更好的方案是使用 @ViewChild和模板变量
不推荐的写法：
@Component({
selector: 'my-comp',
template: `
<input type="text" />
<div> 内容部分 </div>
`
})
export class MyComp {
constructor(el: ElementRef) {
el.nativeElement.querySelector('input').focus();
}
}
官网建议的格式：
@Component({
selector: 'my-comp',
template: `
<input #myInput type="text" />
<div> 内容部分 </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 对象实例
网友评论