第四章 内建组件
介绍
angular2提供了很多内建的组件,在这1章,我们会分别介绍它们,并展现1些怎样使用它们的例子.
:fa-info-circle:内建组件可以直接导入到项目中来,而不需要像我们前面介绍1样使用directives导入
NgIf
当你想要根据1个特定的条件显示或隐藏1个组件的时候,你可使用NgIf,条件是1个返回boolean类型的ng2的表达式.
如果表达式返回false,元素将从DOM树种移除,如果为true,则会显示.
<div *ngIf="false" > </div> <!-- 绝不显示 -->
< div * ngIf="a > b" > </div> <!-- 当A大于B的时候显示 -->
< div * ngIf="str == 'yes'" > </div> <!-- 如果字符串值为yes的时候显示 -->
< div * ngIf="myFunc()" > </div> <!-- 如果myFunc函数返回true的时候显示 -->:fa-info-circle:如果你有使用ng1的经验,你可能会使用ngIf.在ng2中,你可以直代替换.另外一方面,你也能够选择ng2提供的非内建ng-show.如果你的目标是改变某个元素的CSS显示,你也能够是使用ng-style或class属性,这些将在后面介绍
NgSwich
有时,你想要去根据不同的条件显示不同的元素,你可以重复使用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>像你看到的1样,当既不是A也不是B的时候,看起来是不太好看的.这个如果有1个else的选项就行了.另外,如果条件提交愈来愈多,这个例子会变得愈来愈复杂.
为了描写这类复杂清单,斟酌1个具有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 els\ e
</div>
</div>为了简化这个操作,ng2提供了ngSwitch来处理这类问题.
如果你熟习switch语法,ngSwitch是很好理解的,它跟switch的原理是1样的.
这个组件的理念是:使用1个简单表达式作为条件,基于这个表达式的值来做操作.
进程以下:
- 使用ngSwitchWhen指令描写表达式的值
- 处理所有的可能,其他可能使用ngSwitchDefault来表述
让我们看看使用NgSwitch的代码:
<div class="container" [ngSwitch]="myVar">
<div *ngSwitchWhen="'A'">Var is A</div>
<div *ngSwitchWhen="'B'">Var is B</div>
<div *ngSwitchDefault>Var is something else</div>
</div>如果我们插入1个C的值,代码会变成下面这样:
<div class="container" [ngSwitch]="myVar">
<div *ngSwitchWhen="'A'">Var is A</div>
<div *ngSwitchWhen="'B'">Var is B</div>
<div *ngSwitchWhen="'C'">Var is C</div>
<div *ngSwitchDefault>Var is something else</div>
</div>我们不会去关注默许条件究竟是甚么.
ngSwitchDefault是可选的,如果我们不写出来,当甚么条件都不满足的时候,将会甚么都不显示.
你也能够根据不同的元素定义1些相同的ngSwitchWhen,下面是1个例子:
code/built_in_components/ng_switch/app.ts
@Component({
selector: 'switch-sample-app',
template: `
<h4 class="ui horizontal divider header">
Current choice is {{ choice }}
</h4>
<div class="ui raised segment">
<ul [ngSwitch]="choice">
<li *ngSwitchWhen="1">First choice</li>
<li *ngSwitchWhen="2">Second choice</li>
<li *ngSwitchWhen="3">Third choice</li>
<li *ngSwitchWhen="4">Fourth choice</li>
<li *ngSwitchWhen="2">Second choice, again</li>
<li *ngSwitchDefault>Default choice</li>
</ul>
</div>
<div style="margin-top: 20px;">
<button class="ui primary button" (click)="nextChoice()">
Next choice
</button>
</div>
`
})
class SwitchSampleApp {
choice: number;
constructor() {
this.choice = 1;
}
nextChoice() {
this.choice += 1;
if (this.choice > 5) {
this.choice = 1;
}
}
}ngSwitchWhen的另外一个特性是不限制你去使用相同的条件1次,你可以是相同的条件屡次.
NgStyle
使用NgStyle,你可使用ng2表达式来设置给定元素的CSS属性.
使用这个指令的最简单方式是:[style.]=”value”,比如:
code/built_in_components/ng_style/app.ts
<div [style.background-color]="'yellow'"> Uses fixed yellow background
</div>这个代码的意思是设置div的背景色彩为yellow.
使用NgStyle的另外一种方式就是通过设置key-value对来设置多个CSS属性的值,比如:
code/built_in_components/ng_style/app.ts
<div [ngStyle]="{color: 'white', 'background-color': 'blue'}"> Uses fixed white text on blue background
</div>:fa-info-circle:注意上面的表达式,color没有使用引号,而background-color使用了引号,是由于,NgStyle的表达式是1个JavaScript的表达式,color是1个正常变量名字,但是background-color不是1个正常的变量名字,它代表background减去color,但是如果使用引号,就能够了.
这里我们设置了color和background-color的值.
但是在我们的实际项目中,1般我们都会使用动态值而不是固定值.以下,我们定义两个输入框:
code/built_in_components/ng_style/app.ts
<div class="ui input">
<input type="text" name="color" value="{{color}}" #colorinput>
</div>
<div class="ui input">
<input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
</div>然后,我们使用它们的值去设置3个元素的CSS属性.
第1个,通过fontSize设置字体大小,以下:
code/built_in_components/ng_style/app.ts
<div>
<span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
red text
</span>
</div>上面需要注意的是[style.font-size.px],它指明了单位.
.px说明了我们希望后面的数字表示的单位是px,固然也能够使用[style.fontSize.em],[style.fontSize.%]
另外两个元素使用#colorinput设置文本及背景色彩,以下:
code/built_in_components/ng_style/app.ts
<h4 class="ui horizontal divider header"> ngStyle with object property from variable
</h4>
<div>
<span [ngStyle]="{color: colorinput.value}">
{{ colorinput.value }} text </span>
</div>
<h4 class="ui horizontal divider header"> style from variable
</h4>
<div [style.background-color]="colorinput.value" style="color: white;">
{{ colorinput.value }} background
</div>另外一种方式,当我们使用apply setting按钮的时候,会调用apply去设置新的值:
code/built_in_components/ng_style/app.ts
apply(color, fontSize) {
this.color = color;
this.fontSize = fontSize;
}NgClass
NgClass指令可使你能够动态修改给定元素的CSS类.
:fa-info-circle:如果你使用过ng1,这个跟ng1是很类似的.
使用这个指令的1种方式就是传递1个对象常量,对象的key代表的是类名,对象的值是1个boolean值,代表该class是不是利用于指定的元素.
假定我们有1个bordered的CSS类,以下:
code/built_in_components/class/styles.css
.bordered {
border: 1px dashed black; background-color: #eee;
}然后增加两个div元素,1个具有bordered类,1个没有:
code/built_in_components/ng_class/app.ts
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>跟料想的1样,渲染以下:
固然,更加有用的使用方式是使用动态绑定:
code/built_in_components/ng_class/app.ts
<div [ngClass]="{bordered: isBordered}">
Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>另外,我们也能够在我们的组件类中定义1个对象:
code/built_in_components/ng_class/app.ts
toggleBorder() {
this.isBordered = !this.isBordered;
this.classesObj = {
bordered: this.isBordered
};
}然后直接使用这个对象:
code/built_in_components/ng_class/app.ts
<div [ngClass]="classesObj">
Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
</div>:fa-info-circle:注意,当你的key中包括’-‘符号时,1定记得要加引号,不然是非法的.
我们也能够是使用数组来表示哪些类需要添加到我们的元素上:
ode/built_in_components/ng_class/app.ts
<div class="base" [ngClass]="['blue', 'round']">
This will always have a blue background and round corners
</div>也能够在我们的组件代码中定义1个数组变量:
this.classList = ['blue', 'round'];然后将其传递进去:
code/built_in_components/ng_class/app.ts
<div class="base" [ngClass]="classList">
This is {{ classList.indexOf('blue') > -1 ? "" : "NOT" }} blue and {{ classList.indexOf('round') > -1 ? "" : "NOT" }} round
</div>注意,使用class属性标注的类,始终会添加到元素上面,如:
code/built_in_components/ng_class/app.ts
<div class="base" [ngClass]="['blue', 'round']">
This will always have a blue background and round corners
</div>这个元素会有3个类,base,blue和round.
NgFor
这个指令的意思就是重复渲染1个DOM元素,并且每次传递不同的参数给它.
:fa-info-circle:这个指令与ng-repeat1样.
语法为:*ngFor=”let item of items”
- let item标识了每次接受元素的变量
- items是来自组件的数组变量
假定我们有下面的数组:
this.cities = ['Miami', 'Sao Paulo', 'New York'];然后,我们可以像下面这样写:
code/built_in_components/ng_for/app.ts
<h4 class="ui horizontal divider header">
Simple list of strings
</h4>
<div class="ui list" *ngFor="let c of cities">
<div class="item">{{ c }}</div>
</div>它会像下面这样渲染每一个城市:
也能够迭代1个数组对象:
code/built_in_components/ng_for/app.ts
this.people = [
{ name: 'Anderson', age: 35, city: 'Sao Paulo' },
{ name: 'John', age: 12, city: 'Miami' },
{ name: 'Peter', age: 22, city: 'New York' }
];然后基于每列渲染1个表格:
code/built_in_components/ng_for/app.ts
<h4 class="ui horizontal divider header"> List of objects</h4>
<table class="ui celled table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tr *ngFor="let p of people">
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
<td>{{ p.city }}</td>
</tr>
</table>结果以下:
也能够与嵌套数组工作:
code/built_in_components/ng_for/app.ts
this.peopleByCity = [
{
city: 'Miami',
people: [
{ name: 'John', age: 12 },
{ name: 'Angel', age: 22 }
]
}, {
city: 'Sao Paulo',
people: [
{ name: 'Anderson', age: 35 },
{ name: 'Felipe', age: 36 }
]
}];我们可以是使用NgFor仅仅渲染城市:
code/built_in_components/ng_for/app.ts
<div *ngFor="let item of peopleByCity">
<h2 class="ui header">{{ item.city }}</h2>也能够渲染每一个城市的嵌套人员:
code/built_in_components/ng_for/app.ts
<table class="ui celled table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tr *ngFor="let p of item.people">
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
</tr>
</table>模板代码以下:
code/built_in_components/ng_for/app.ts
<h4 class="ui horizontal divider header"> Nested data
</h4>
<div *ngFor="let item of peopleByCity">
<h2 class="ui header">{{ item.city }}</h2>
<table class="ui celled table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tr *ngFor="let p of item.people">
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
</tr>
</table>
</div>渲染结果以下:
过去索引
有时候,在迭代数组的时候,我们需要每一个元素的索引.
你可使用 let idx = index语法获得索引,它添加到ng-for后面,以下:
code/built_in_components/ng_for/app.ts
<div class="ui list" *ngFor="let c of cities; let num = index">
<div class="item">{{ num+1 }} - {{ c }}</div>
</div>在位置前,我增加了城市序号,渲染以下:
NgNonBindable
当我们需要告知angular不要去编辑部份页面的时候,以下:
code/built_in_components/ng_non_bindable/app.ts
<div>
<span class="bordered">{{ content }}</span> <span class="pre" ngNonBindable>
← This is what {{ content }} rendered
</span>
</div>渲染以下:
可以看出,{{ content }}没有编译与绑定.
总结
ng2只有少数几个内建组件,但是可以动态组合这些组件,完成1个项目.