有不清楚的地方可以加QQ群: 142681686. 不会24小时全天问答(毕竟还有工作), 但是当你遇到问题没地方找到答案的时候,来这里提问一下,死马当活马医万一我看到了刚好也知道答案呢? 也不浪费你啥是不是!!
前言
这一章节咱们来把angular中的指令拿出来和vue做对比,帮助大家掌握angular指令的使用
正文
条件渲染: ngIf
在angular通过*ngIf指令控制一个元素显示与否,如:
<p *ngIf="seen">现在你看到我了</p>
import { Component } from '@angular/core';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.html',
styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
public seen = true;
}
angular中如何通过else显示另外一个模版呢?
<p *ngIf="seen; else elseBlock">现在为真</p>
<ng-template #elseBlock><p>现在为假</p></ng-template>
这里的ng-template标签和vue中的template标签一样, 用于定义模板,在渲染的过程中并不会生成什么东西.
在angular中怎么实现类似于VUE中的多选择呢?
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
我建议你现在使用,如下结构实现:
<div *ngIf="type === 'A'">
A
</div>
<div *ngIf="type === 'B'">
B
</div>
<div *ngIf="type === 'C'">
C
</div>
<div *ngIf="type !== 'A' && type !== 'B' && type !== 'C'">
Not A/B/C
</div>
看起来好像不是那么优雅是不是? 但是这样确实满足了咱们的需求不是吗? 以后咱们还会介绍其他的通过编程的方式来控制元素的显示, 但是对于咱们刚入门的来说, 现在的是最好理解的方式.
经过之前的修改后咱们的welcome组件现在长成这个样子:
welcome.html
<h2 (click)="clickHandler($event)">你好, 欢迎来到{{ name }}!</h2>
<div *ngIf="active === 1">
A
</div>
<div *ngIf="active === 2">
B
</div>
<div *ngIf="active === 3">
C
</div>
<div *ngIf="active !== 1 && active !== 2 && active !== 3">
Not A/B/C
</div>
welcome.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.html',
styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
public name = 'Angular';
private active = 1;
clickHandler() {
this.active++;
}
}
循环渲染: ngFor
在angular中循环渲染和vue是十分相似的,vue中是这样的:
<div id="app-4">
<ol>
<li v-for="(todo, index) in todos">
{{ todo.text }} {{ index }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
那么angular中是怎么样的呢?
welcome.html
<h2 (click)="clickHandler($event)">你好, 欢迎来到{{ name }}!</h2>
<div *ngIf="active === 1">
A
</div>
<div *ngIf="active === 2">
B
</div>
<div *ngIf="active === 3">
C
</div>
<div *ngIf="active !== 1 && active !== 2 && active !== 3">
Not A/B/C
</div>
<ol>
<li *ngFor="let todo of todos; let i = index">
{{ todo.text }} {{ i }}
</li>
</ol>
welcome.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.html',
styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
public name = 'Angular';
private active = 1;
public todos = [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
];
clickHandler() {
this.active++;
}
}
是不是基本上一样呢,对的, 其实你会VUE就会angular!!
最后
看了这些后是不是对学会angular的信心更足了呢? 对的, 其实angular没有网上说的这样难, 那样难; 难的不是angular,而是你决定学习angular的心.