关于angular中内置指令的介绍

一、关于ngIf的使用

格式:

*ngIf = "表达式"

表达式由自己随便定义，但是表达式返回的是布尔类型的值，如果返回的是假，那么就直接用DOM上移除

<p *ngIf="true" >p1</p>
<p *ngIf="a > b" >p2</p>
<p *ngIf="str == 'yes'" >p3</p>
<p *ngIf="myfun()" >p4</p>

...
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设置样式

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

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

四、关于ngClass的使用，通过angular表达式给特定的DOM添加与删除class

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

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