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>
结果:
第一行显示,第二行不显示