这篇文章主要给大家总结了一些关于Angular4 中入门常用的指令，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起学习学习吧。
前言
本文主要给大家介绍了关于Angular4 常用指令的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：
NgIf
<div></div><!-- never displayed --><div> b"></div><!-- displayed if a is more than b --><div></div><!-- displayed if str holds the string "yes" --><div></div><!-- displayed if myFunc returns a true value -->
NgSwitch
有时候需要根据不同的条件，渲染不同的元素，此时我们可以使用多个 ngIf 来实现。
<div class="container"> <div>Var is A</div><div>Var is B</div><div>Var is something else</div></div>
如果 myVar 的可选值多了一个 ‘C’，就得相应增加判断逻辑：
<div class="container"> <div>Var is A</div><div>Var is B</div><div>Var is C</div><div> Var is something else </div></div>
可以发现 Var is something else 的判断逻辑，会随着 myVar 可选值的新增，变得越来越复杂。遇到这种情景，我们可以使用 ngSwitch 指令。
<div class="container"> <div>Var is A</div><div>Var is B</div><div>Var is C</div><div>Var is something else</div></div>
NgStyle
NgStyle 让我们可以方便得通过 Angular 表达式，设置 DOM 元素的 CSS 属性。
1、设置元素的背景颜色
<div> Use fixed yellow background </div>
2、设置元素的字体大小
<!-- 支持单位: px | em | %--><div> <span> red text </span></div>
NgStyle 支持通过键值对的形式设置 DOM 元素的样式：
<div> 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>This is never bordered</div><div>This is always bordered</div><!-- Use component instance property --><div> Using object literal. Border {{ isBordered ? "ON" : "OFF" }} </div><!-- Class names contains dashes --><div> Class names contains dashes must use single quote </div><!-- Use a list of class names --><div class="base"> This will always have a blue background and round corners </div>
NgFor
NgFor 指令用来根据集合(数组) ，创建 DOM 元素，类似于 ng1 中 ng-repeat 指令
<div class="ui list"> <div class="item">{{ num+1 }} - {{ c }}</div></div>
使用 trackBy 提高列表的性能
@Component({ selector: 'my-app', template: ` <ul> <li>{{item.id}}</li></ul><button>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"> ← This is what {{ content }} rendered </span></div>
Angular 4.x 新特性
If…Else Template Conditions
语法
使用示例
<p>You are not allowed to see our secret</p><p> Our secret is being happy </p>
―>
使用示例
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: ` <p>Fetching...</p><p> {{user.username }} </p> `, }) export class AppComponent implements OnInit { auth: Observ<p style="color:transparent">来源gao!%daima.com搞$代*!码网</p>able; ngOnInit() { this.auth = Observable .of({ username: 'semlinker', password: 'segmentfault' }) .delay(new Date(Date.now() + 2000)); } }
我有话说
使用 [hidden] 属性控制元素可见性存在的问题
<div> Hello, there! </div>
上面的代码在通常情况下，都能正常工作。但当在对应的 DOM 元素上设置 display: flex 属性时，尽管[hidden] 对应的表达式为 true，但元素却能正常显示。对于这种特殊情况，则推荐使用 *ngIf。
直接使用 DOM API 获取页面上的元素存在的问题
@Component({ selector: 'my-comp', template: ` <div> Some other content </div> ` }) export class MyComp { constructor(el: ElementRef) { el.nativeElement.querySelector('input').focus(); } }
以上的代码直接通过 querySelector() 获取页面中的元素，通常不推荐使用这种方式。更好的方案是使用 @ViewChild 和模板变量，具体示例如下：
@Component({ selector: 'my-comp', template: ` <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 对象实例。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对gaodaima搞代码网的支持。
以上就是Angular4 中常用的指令入门总结的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Angular4 中常用的指令入门总结
