|
Web前端三大框架_angular.js 6.0（二）(三)
|
nbsp;templateUrl: './outputchild.component.html', 7 styleUrls: ['./outputchild.component.css'], 8 // 第一步 注册属性事件对象 9 outputs: ['sendMessage'] 10 }) 11 export class OutputchildComponent implements OnInit { 12 // 4 实例化消息对象 13 // @Output() sendMessage = new EventEmitter(); 14 // 第二步 实例化 15 sendMessage = new EventEmitter(); 16 // 点击按钮的时候，发布消息 17 changeColor() { 18 // 5 发布消息 19 // console.log(this) 20 this.sendMessage.emit({ 21 // color: 'red' 22 color: 'green' 23 }) 24 } 25 constructor() { } 26 27 ngOnInit() { 28 } 29 30 } 31 |
1.10模板指令
有时候我们要动态创建元素，此时我们可以使用模板指令
在ng6中，指令都是驼峰式命名，例如ngStyle，并且指令的属性值都是字符串，想变成js环境，通常要使用语法糖，例如[]
模板指令是控制元素的创建，想控制多个兄弟元素的创建，我们要使用模板组件
1.10.1模板组件
vue中，模板元素是template，
但是在ng6中，模板组件叫ng-template组件
当我们使用模板指令，控制元素的创建的时候，通常来说
如果是普通元素，那么我们要使用*语法糖
如果是ng-template模板组件，那么我们要使用[]语法糖
1.10.2 ngIf模板指令
跟vue中的v-if指令一样，控制元素是否创建的
当为普通元素添加的时候，例如div，h1等，要使用*语法糖
当为ng-template组件添加的时候，要使用[]语法糖
如果ngIf属性值为true，则创建这个元素
如果ngIf属性值为false，则删除这个元素
1.10.3多分支条件模板执行
vue中通过v-if， v-else， v-else-if指令定义
ng6模拟了switch语句，实现多分支条件模板指令
switch () {
case:
case:
default:
}
ng6模拟switch语句，提供了一组多分支条件模板指令，ngSwitch, ngSwitchCase, ngSwitchDefault
ngSwitch作用是设置条件的，不控制元素是否创建的，因此不是模板指令，所有元素都使用[]语法糖
ngSwitchCase, ngSwitchDefault可以控制元素是否创建，因此对于普通元素来说，我们要使用*语法糖
ngSwitchCase表示条件，使用了*语法糖，属性值就是js环境，字符串加引号
ngSwitchDefault表示默认条件，不需要设置属性值
| 1 <button (click)="toggle()">显隐元素</button> 2 <!-- 普通元素使用*语法糖 --> 3 <h1 *ngIf="isCreate">爱创课堂</h1> 4 <!-- 借助模板元素, 使用[]语法糖 --> 5 <ng-template [ngIf]="isCreate"> 6 <h1>爱创课堂</h1> 7 <h2>专业前端培训学校</h2> 8 </ng-template> 9 <!-- 定义选项卡 --> 10 <hr> 11 <button (click)="changePage('home')">显示home页面</button> 12 <button (click)="changePage('list')">显示list页面</button> 13 <button (click)="changePage('defailt')">显示detail页面</button> 14 <!-- 定义条件 --> 15 <div [ngSwitch]="page"> 16 <h1 *ngSwitchCase="'home'">home page</h1> 17 <h1 *ngSwitchCase="demo">list page</h1> 18 <h1 *ngSwitchDefault>detail page</h1> 19 </div> 20 21 |
1.10.4循环模板指令
vue中，我们用v-for指令，定义循环模板指令
ng6中，我们用ngFor定义循环模板指令
在普通元素上使用，要使用*语法糖
语法 *ngFor=”let item of data”
let, of 是关键字
item 表示循环变量（表示数组中的每个成员）
data就是我们要遍历的数据
在ng6中，循环变量不仅仅只有item，还有
index 表示索引值
first 表示是否是第一个
last 表示是否是最后一个
even 表示是否是偶数次
odd 表示是否是奇数次
注意：计算机是从0开始计数的，人眼是从1开始计数的，所以
计算机中的奇数，就是人眼看到的偶数
计算机中的偶数，就是人眼看到的奇数
除了item模板变量之外，其他的模板变量，都要先定义再 |