Angular4 中常用的指令入门总结
前言
本文主要给大家介绍了关于angular4 常用指令的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：
ngif
<div *ngif="false"></div> <!-- never displayed --> <div *ngif="a > b"></div> <!-- displayed if a is more than b --> <div *ngif="str == 'yes'"></div> <!-- displayed if str holds the string "yes" --> <div *ngif="myfunc()"></div> <!-- displayed if myfunc returns a true value -->
ngswitch
有时候需要根据不同的条件，渲染不同的元素，此时我们可以使用多个 ngif 来实现。
<div class="container"> <div *ngif="myvar == 'a'">var is a</div> <div *ngif="myvar == 'b'">var is b</div> <div *ngif="myvar != 'a' && myvar != 'b'">var is something else</div> </div>
如果 myvar 的可选值多了一个 'c'，就得相应增加判断逻辑：
<div class="container"> <div *ngif="myvar == 'a'">var is a</div> <div *ngif="myvar == 'b'">var is b</div> <div *ngif="myvar == 'c'">var is c</div> <div *ngif="myvar != 'a' && myvar != 'b' && myvar != 'c'"> var is something else </div> </div>
可以发现 var is something else 的判断逻辑，会随着 myvar 可选值的新增，变得越来越复杂。遇到这种情景，我们可以使用 ngswitch 指令。
<div class="container" [ngswitch]="myvar"> <div *ngswitchcase="'a'">var is a</div> <div *ngswitchcase="'b'">var is b</div> <div *ngswitchcase="'c'">var is c</div> <div *ngswitchdefault>var is something else</div> </div>
ngstyle
ngstyle 让我们可以方便得通过 angular 表达式，设置 dom 元素的 css 属性。
1、设置元素的背景颜色
<div [style.background-color="'yellow'"]> use fixed yellow background </div>
2、设置元素的字体大小
<!-- 支持单位: px | em | %-->
<div>
<span [ngstyle]="{color: 'red'}" [style.font-size.px]="fontsize">
red text
</span>
</div>
ngstyle 支持通过键值对的形式设置 dom 元素的样式：
<div [ngstyle]="{color: 'white', 'background-color': 'blue'}">
uses fixed white text on blue background
</div>
注意到 background-color 需要使用单引号，而 color 不需要。这其中的原因是，ng-style 要求的参数是一个 javascript 对象，color 是一个有效的 key，而 background-color 不是一个有效的 key ，所以需要添加 ''。
ngclass
ngclass 接收一个对象字面量，对象的 key 是 css class 的名称，value 的值是 truthy/falsy 的值，表示是否应用该样式。
1、css class
.bordered {
border: 1px dashed black; background-color: #eee;
}
2、html
<!-- use boolean value -->
<div [ngclass]="{bordered: false}">this is never bordered</div>
<div [ngclass]="{bordered: true}">this is always bordered</div>
<!-- use component instance property -->
<div [ngclass]="{bordered: isbordered}">
using object literal. border {{ isbordered ? "on" : "off" }}
</div>
<!-- class names contains dashes -->
<div[ngclass]="{'bordered-box': false}">
class names contains dashes must use single quote
</div>
<!-- use a list of class names -->
<div class="base" [ngclass]="['blue', 'round']">
this will always have a blue background and round corners
</div>
ngfor
ngfor 指令用来根据集合(数组) ，创建 dom 元素，类似于 ng1 中 ng-repeat 指令
<div class="ui list" *ngfor="let c of cities; let num = index">
<div class="item">{{ num+1 }} - {{ c }}</div>
</div>
使用 trackby 提高列表的性能
@component({
selector: 'my-app',
template: `
<ul>
<li *ngfor="let item of collection;trackby: trackbyfn">{{item.id}}</li>
</ul>
<button (click)="getitems()">refresh items</button>
`,
})
export class app {
constructor() {
this.collection = [{id: 1}, {id: 2}, {id: 3}];
}
getitems() {
this.collection = this.getitemsfromserver();
}
getitemsfromserver() {
return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
}
trackbyfn(index, item) {
return index; // or item.id
}
}
ngnonbindable
ngnonbindable 指令用于告诉 angular 编译器，无需编译页面中某个特定的html代码片段。
<div class='ngnonbindabledemo'>
<span class="bordered">{{ content }}</span>
<span class="pre" ngnonbindable>
← this is what {{ content }} rendered
</span>
</div>
angular 4.x 新特性
if...else template conditions
语法
<element *ngif="[condition expression]; else [else template]"></element>
使用示例
<ng-template #hidden> <p>you are not allowed to see our secret</p> </ng-template> <p *ngif="shown; else hidden"> our secret is being happy </p>
<template> —> <ng-template>
使用示例
import { component, oninit } from '@angular/core';
import { observable } from 'rxjs/observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';
@component({
selector: 'exe-app',
template: `
<ng-template #fetching>
<p>fetching...</p>
</ng-template>
<p *ngif="auth | async; else fetching; let user">
{{user.username }}
</p>
`,
})
export class appcomponent implements oninit {
auth: observable<{}>;
ngoninit() {
this.auth = observable
.of({ username: 'semlinker', password: 'segmentfault' })
.delay(new date(date.now() + 2000));
}
}
我有话说
使用 [hidden] 属性控制元素可见性存在的问题
<div [hidden]="!showgreeting"> hello, there! </div>
上面的代码在通常情况下，都能正常工作。但当在对应的 dom 元素上设置 display: flex 属性时，尽管[hidden] 对应的表达式为 true，但元素却能正常显示。对于这种特殊情况，则推荐使用 *ngif。
直接使用 dom api 获取页面上的元素存在的问题
@component({
selector: 'my-comp',
template: `
<input type="text" />
<div> some other content </div>
`
})
export class mycomp {
constructor(el: elementref) {
el.nativeelement.queryselector('input').focus();
}
}
以上的代码直接通过 queryselector() 获取页面中的元素，通常不推荐使用这种方式。更好的方案是使用 @viewchild 和模板变量，具体示例如下：
@component({
selector: 'my-comp',
template: `
<input #myinput type="text" />
<div> some other content </div>
`
})
export class mycomp implements afterviewinit {
@viewchild('myinput') input: elementref;
constructor(private renderer: renderer) {}
ngafterviewinit() {
this.renderer.invokeelementmethod(
this.input.nativeelement, 'focus');
}
}
另外值得注意的是，@viewchild() 属性装饰器，还支持设置返回对象的类型，具体使用方式如下：
@viewchild('myinput') myinput1: elementref;
@viewchild('myinput', {read: viewcontainerref}) myinput2: viewcontainerref;
若未设置 read 属性，则默认返回的是 elementref 对象实例。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对的支持。
下一篇： nodejs前端自动化构建环境的搭建