关于angular中内置指令的介绍

一、关于

ngIf

的使用

*ngIf = "表达式"

DOM

<div *ngIf="true" >div1</div>
<div *ngIf="a > b" >div2</div>
<div *ngIf="str == 'yes'" >div3</div>
<div *ngIf="myfun()" >div4</div>

...
private a:number;
private b:number;
private str:string;
constructor() {
this.a = 10;
this.b = 7;
this.str = 'yes';
}

ngOnInit() {
}
myfun():boolean{
return false;
}
...

二、关于

ngSwitch

的使用，跟原生

javascript

中

switch

与

case

一样的使用

<ul [ngSwitch]="myVal">
<li *ngSwitchCase="'A'">list1</li>
<li *ngSwitchCase="'B'">list2</li>
<li *ngSwitchDefault>list3</li>
</ul>

private myVal:string;
constructor() {
this.myVal = 'A';
}

三、关于

ngStyle

的使用，通过

angular

表达式给特定的

DOM

设置样式

<div [style.background-color]="bgColor">我是样式一</div>
<!--如果样式带单位的要写明  -->
<p [style.font-size.px]="'20'">我是字体</p>
<!--如果不是复合属性可以不加单引号  -->
<div [ngStyle]="{'background-color': '#630',width:'100px',height:'100px',color:'#fff'}">我是样式二</div>
<div [ngStyle]="divstyle">我是样式二</div>

...
private bgColor:string;
private divstyle:any;
constructor() {
this.bgColor = "#360";
this.divstyle = {
'background-color': '#f90',
width:'100px',
height:'100px',
color:'#fff'
};
}
...

四、关于

ngClass

的使用，通过

angular

表达式给特定的

DOM

添加与删除

class

<div [ngClass]="{bordered:true}" ></div>
<div [ngClass]="{bordered:isShowBorder}" ></div>
<div [ngClass]="className" ></div>
<div [class.bordered]="getClassName()">1111</div>
<!-- 如果添加多个样式  -->
<div [ngClass]="['bordered','colors']">我是多个样式</div>
<div [ngClass]="classNameList">我是多个样式</div>

...
private className:string;
private isShowBorder:boolean;
private classNameList:Array<string>;
constructor() {
this.className = 'bordered';
this.isShowBorder = false;
this.classNameList = ['bordered','colors'];
}

ngOnInit() {
}

getClassName():boolean{
return true;
}

五、关于

ngFor

的使用，迭代一个数组

<ng-container *ngFor="let nav of navs;let i = index" >
<a href="">{{nav}}</a>
<span>{{i < (navs.length - 1) ? '>':''}}</span>
</ng-container>

* 1、上面的let i = index不是必须的，当要使用序列号的时候才加上去

六、关于

ngNonBindable

源文件输出

<p>{{text}}</p>
<p ngNonBindable>{{text}}</p>