1.属性型指令
1.1.NgClass
本人理解：相当于jq中，使用js添加class。
html
<label class="fc-label" [ngClass]="{'fc-small':ifSmall}">
ts
export class AppChildComponent implements OnInit {
ifSmall = false;
constructor() {
}
ngOnInit() {
}
}
说明：
1.ngClass值的格式为json类型。
2.fc-small为.css文件的一个类，ifSmall为ts文件一个变量，boolean类型。如果ifSmall为true，则fc-small类显示；如果为false，则fc-small类不显示。
1.2.NgStyle
本人理解：相当于jq中，使用js添加css。
html
<label class="fc-label" [ngStyle]="myLaberStyle">
ts
export class AppChildComponent implements OnInit {
myLaberStyle = {
'font-size': '30px'};
constructor() {
}
ngOnInit() {
}
}
说明：
1.变量myLaberStyle为json格式数据；
2.雷同如下代码：
<label class="fc-label" [style.font-size]="'30px'">
或者
<label class="fc-label" style="font-size:30px">
1.3.NgModel
本人理解：相当于jq中，使用js对表单进行赋值和取值操作。
<input [(ngModel)]="name" placeholder="name">
说明：用于HTML表单的数据的双向绑定，其中name为ts中的一个成员变量；当input的值发生改变时，ts文件中的name的值也跟着改变。同理，当ts文件中的name的值发生改变，input的值在显示时，也发生改变。
1.4.自定义属性型指令
1.4.1.生成指令命令
ng g directive myDirective --no-spec (生成不带.spec.ts文件)
生成的结构如下：
import {
Directive } from '@angular/core';
@Directive({
selector: '[appMyDirective]'
})
export class MyDirectiveDirective {
constructor() {
}
}
说明：在使用命令生成指令后，该指令的ts会被默认引入到app.module.ts中(declarations属性中引用)，从而使指令生效。如果你生成的指令是在子路由中，请将该指令引入到子路由的.module.ts中(同时删除主路由下app.module.ts对该指令的引入)。
1.4.2.编写指令
目标：生成一个鼠标移动的到p标签上，会字体变红
1.4.2.1.不带输入值的指令
html
<div>
<p appMyDirective>It's my AppMyDirective !</p>
</div>
ts
import {
Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
selector: '[appMyDirective]'
})
export class MyDirectiveDirective {
constructor(private er: ElementRef) {
}
@HostListener('mouseenter') onMouseEnter() {
this.changeColor('red');
}
@HostListener('mouseleave') onMouseLeave() {
this.changeColor(null);
}
private changeColor(color: string) {
this.er.nativeElement.style.color = color;
}
}
1.4.2.2.带一个输入值的指令
重要提示：使用@Input进行传值。
html
<div>
<p [appMyDirective] = "'red'">It's my AppMyDirective !</p>
</div>
ts
import {
Directive, ElementRef, HostListener, Input} from '@angular/core';
@Directive({
selector: '[appMyDirective]'
})
export class MyDirectiveDirective {
@Input('appMyDirective') myColor: string; //@Input的假名和指令名称一致
constructor(private er: ElementRef) {
}
@HostListener('mouseenter') onMouseEnter() {
this.changeColor(this.myColor || 'red');
}
@HostListener('mouseleave') onMouseLeave() {
this.changeColor(null);
}
changeColor(color: string) {
this.er.nativeElement.style.color = color;
}
}
关于ts的说明：如果@Input的假名不是appMyDirective(和指令名称不一致)，假设为xxxxxColor;那么html代码如下：
<div>
<p appMyDirective [xxxxxColor] = "'red'">It's my AppMyDirective !</p>
</div>
1.4.2.3.带多个输入值的指令
html
<div>
<p [appMyDirective] = "'red'" myFlag = "true">It's my AppMyDirective !</p>
</div>
ts
import {
Directive, ElementRef, HostListener, Input} from '@angular/core';
@Directive({
selector: '[appMyDirective]'
})
export class MyDirectiveDirective {
@Input('appMyDirective') myColor: string;
@Input() myFlag: string;
constructor(private er: ElementRef) {
}
@HostListener('mouseenter') onMouseEnter() {
if ('true' === this.myFlag) {
this.changeColor('yellow');
} else {
this.changeColor(this.myColor || 'red');
}
}
@HostListener('mouseleave') onMouseLeave() {
this.changeColor(null);
}
changeColor(color: string) {
this.er.nativeElement.style.color = color;
}
}
和1.4.2.2的变化：
1.html的p标签多了个属性 myFlag = “true”
2.ts中多个了输入型变量 @Input() myFlag: boolean;
2.结构型指令
重要提示：每个元素(标签/组件)上只能有一个结构型指令。
2.1.NgIf
本人理解：相当于jq中，使用js对html中部分代码进行隐藏操作。
<div class="fc-panel" *ngIf="ifVisible">
<p>hahahaha</p>
</div>
说明：
1.如果ifVisible为true时，该div显示；为false时，不显示；
2.NgIf和NgFor不能同时使用；
2.2.NgFor
本人理解：相当于jq中，使用js对数据进行遍历，然后添加进html中。
html
<ul class="fc-panel-items">
<li class="fc-panel-item" *ngFor="let item of oneValueList">{
{
item}}</li>
</ul>
ts
export class AppChildComponent implements OnInit {
oneValueList = ['aaaaa', 'bbbbb', 'ccccc', 'ddddd', 'eeeee', 'fffff', 'asdqweq'];
constructor() {
}
ngOnInit() {
}
}
说明：NgFor绑定可以时标签也可以是某个组件的标签。
2.3.NgSwitch
本人理解：相当于jq中，使用js使用if关键字进行部分显示代码。
html
<div [NgSwitch] = "switchType">
<div *NgSwitchCase= "one">one</div>
<div *NgSwitchCase= "two">two</div>
<div *NgSwitchCase= "three">three</div>
<div *NgSwitchDefault= "default">default</div>
</div>
ts
export class AppChildComponent implements OnInit {
switchType = 'one';
constructor() {
}
ngOnInit() {
}
}
说明:
0.NgSwitch本身是属性型指令，但它的子指令NgSwitchCase和NgSwitchDefault为结构性指令；
1.当switchType的值为one的时候，会显示第一个的div；如果switchType的值不在其中，则显示默认的最后一个div；
2.NgSwitchCase和NgSwitchDefault绑定可以时标签也可以是某个组件的标签。
2.4.ng-template标签
<ng-template>
<p>aaaaaaaaaaaaaa</p>
</ng-template>
说明：ng-template标签相当于一个注释，在被标签包含的所有内容将会被隐藏起来。
2.5.ng-container标签
本人理解：相当于在NgIf或在NgFor使用时，对了 一个载体。如果单独使用，无任何效果。
使用一：使用NgFor
<ng-container class="fc-panel" *ngIf="ifVisible">
<p>hahahaha</p>
</ng-container>
使用二：同时使用NgIf和NgFor
<li *ngFor="let user of users">
<ng-container *ngIf="user.viewFlag">
{
{
user}}
</ng-container>
</li>
2.6.自定义结构性指令
2.6.1.生成指令命令
在指定的目录下输入以下命令(和1.4.1一致)
ng g directive myDirectiveTwo --no-spec (生成不带.spec.ts文件)
引入指令到指定的.module.ts中
2.6.2.编写命令
说明：基本和1.4.2一致(下面代码采取1.4.2.2结合set使用)
ts：
import {
Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
@Directive({
selector: '[appMyDirectiveTwo]'
})
export class MyDirectiveTwoDirective {
constructor(private temp: TemplateRef<any>, private view: ViewContainerRef) {
}
@Input() set appMyDirectiveTwo(flag: boolean) {
if (flag) {
this.view.createEmbeddedView(this.temp);
} else {
this.view.clear();
}
}
}
html：
<p *appMyDirectiveTwo = "true">It's my AppMyDirectiveTwo true !</p>
<p *appMyDirectiveTwo = "false">It's my AppMyDirectiveTwo false !</p>
结果：
第一行显示，第二行不显示