关于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

<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>