Varissomethingelse
如果myVar的可选值多了一个'C'，就得相应增加判断逻辑：
VarisA
VarisB
VarisC
Varissomethingelse
可以发现Varissomethingelse的判断逻辑，会随着myVar可选值的新增，变得越来越复杂。遇到这种情景，我们可以使用ngSwitch指令。
VarisA
VarisB
VarisC
Varissomethingelse
NgStyle
NgStyle让我们可以方便得通过Angular表达式，设置DOM元素的CSS属性。
1、设置元素的背景颜色
Usefixedyellowbackground
2、设置元素的字体大小
redtext
NgStyle支持通过键值对的形式设置DOM元素的样式：
Usesfixedwhitetextonbluebackground
注意到background-color需要使用单引号，而color不需要。这其中的原因是，ng-style要求的参数是一个Javascript对象，color是一个有效的key，而background-color不是一个有效的key，所以需要添加''。
NgClass
NgClass接收一个对象字面量，对象的key是CSSclass的名称，value的值是truthy/falsy的值，表示是否应用该样式。
1、CSSClass
.bordered{
border:1pxdashedblack;background-color:#eee;
}
2、HTML
Thisisneverbordered
Thisisalwaysbordered
Usingobjectliteral.Border{{isBordered?"ON":"OFF"}}
Classnamescontainsdashesmustusesinglequote
Thiswillalwayshaveabluebackgroundandroundcorners
NgFor
NgFor指令用来根据集合(数组)，创建DOM元素，类似于ng1中ng-repeat指令
{{num+1}}-{{c}}
使用trackBy提高列表的性能
@Component({
selector:'my-app',
template:`
Refreshitems
`,
})
exportclassApp{
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){
returnindex;//oritem.id
}
}
NgNonBindable
ngNonBindable指令用于告诉Angular编译器，无需编译页面中某个特定的HTML代码片段。
{{content}}
←Thisiswhat{{content}}rendered
Angular4.x新特性
If...ElseTemplateConditions
语法
使用示例
Youarenotallowedtoseeoursecret
Oursecretisbeinghappy
—>
使用示例
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:`
Fetching...
{{user.username}}
`,
})
exportclassAppComponentimplementsOnInit{
auth:Observable<{}>;
ngOnInit(){
this.auth=Observable
.of({username:'semlinker',password:'segmentfault'})
.delay(newDate(Date.now()+2000));
}
}
我有话说
使用[hidden]属性控制元素可见性存在的问题
Hello,there!
上面的代码在通常情况下，都能正常工作。但当在对应的DOM元素上设置display:flex属性时，尽管[hidden]对应的表达式为true，但元素却能正常显示。对于这种特殊情况，则推荐使用*ngIf。
直接使用DOMAPI获取页面上的元素存在的问题
@Component({
selector:'my-comp',
template:`
Someothercontent
`
})
exportclassMyComp{
constructor(el:ElementRef){
el.nativeElement.querySelector('input').focus();
}
}
以上的代码直接通过querySelector()获取页面中的元素，通常不推荐使用这种方式。更好的方案是使用@ViewChild和模板变量，具体示例如下：
@Component({
selector:'my-comp',
template:`
Someothercontent
`
})
exportclassMyCompimplementsAfterViewInit{
@ViewChild('myInput')input:ElementRef;
constructor(privaterenderer:Renderer){}
ngAfterViewInit(){
this.renderer.invokeElementMethod(
this.input.nativeElement,'focus');
}
}
另外值得注意的是，@ViewChild()属性装饰器，还支持设置返回对象的类型，具体使用方式如下：
@ViewChild('myInput')myInput1:ElementRef;
@ViewChild('myInput',{read:ViewContainerRef})myInput2:ViewContainerRef;
若未设置read属性，则默认返回的是ElementRef对象实例。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对毛票票的支持。
