Angular4中常用的指令入门总结-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

Angular4中常用的指令入门总结

前言

我们提供的服务有：网站设计、成都做网站、微信公众号开发、网站优化、网站认证、福安ssl等。为上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的福安网站制作公司

本文主要给大家介绍了关于Angular4 常用指令的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：

NgIf

NgSwitch

有时候需要根据不同的条件，渲染不同的元素，此时我们可以使用多个 ngIf 来实现。


 Var is A
 Var is B
 Var is something else

如果 myVar 的可选值多了一个 'C'，就得相应增加判断逻辑：


 Var is A
 Var is B
 Var is C
 
 Var is something else

可以发现 Var is something else 的判断逻辑，会随着 myVar 可选值的新增，变得越来越复杂。遇到这种情景，我们可以使用 ngSwitch 指令。


 Var is A
 Var is B
 Var is C
 Var is something else

NgStyle

NgStyle 让我们可以方便得通过 Angular 表达式，设置 DOM 元素的 CSS 属性。

1、设置元素的背景颜色


 Use fixed yellow background

2、设置元素的字体大小



 
 red text

NgStyle 支持通过键值对的形式设置 DOM 元素的样式：


 Uses fixed white text on blue background

注意到 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


This is never bordered
This is always bordered



 Using object literal. Border {{ isBordered ? "ON" : "OFF" }}




 Class names contains dashes must use single quote

This will always have a blue background and round corners

NgFor

NgFor 指令用来根据集合(数组) ，创建 DOM 元素，类似于 ng1 中 ng-repeat 指令

 
 {{ num+1 }} - {{ c }}

使用 trackBy 提高列表的性能

@Component({
 selector: 'my-app',
 template: `
 
 {{item.id}}
 
 
 `,
})
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代码片段。


 {{ content }}
 
 ← This is what {{ content }} rendered

Angular 4.x 新特性

If...Else Template Conditions

语法

使用示例

You are not allowed to see our secret

Our secret is being happy

新闻中心

其他资讯