5 Directive 指令
指令是Angular提供的操作DOM的途径. 指令分为属性指令和结构指令
Structural Directives (结构指令): 增加, 删除DOM节点以修改布局, 使用*作为指令前缀
Attribute Directives (属性指令): 修改现有元素的外观或行为, 使用[]包裹
5.1 Build-in Directives
5.1.1 *ngIf Structural Directives
根据条件渲染DOM节点或移除DOM节点
<div *ngIf="data.length > 0; then dataList else noData"></div>
<ng-template #dataList>课程列表</ng-template>
<ng-template #noData>没有更多数据</ng-template>
app.component.ts
import { Component } from '@angular/core';
import { Form, FormControl, FormGroup, NgForm } from '@angular/forms';
interface List {
id: number
name: string
age: number
}
// 组件类 被@Component装饰器装饰
@Component({
// 制定组件的使用方式, 当前问标记形式
// app-root => <app-root></app-root>
selector: 'app-root', // 当前组件调用的时候你要以什么形式去调用
templateUrl: './app.component.html', // 当前组件对应的模版是什么 组件模版文件路径
styleUrls: ['./app.component.css'], // 当前组件对应的样式文件
})
// 导出一个类
export class AppComponent {
list: List[] = [
{
id: 1,
name: 'sam',
age: 20
},
{
id: 2,
name: 'jo',
age: 30
}
]
}
app.component.html:
app.component.html:
<div *ngIf="list.length === 0; then noData"></div>
<ng-template #noData>
<div>no content</div>
</ng-template>
<!-- #这个是模板引用变量，可以在模板中引用这个变量 -->
<!-- ng-template是一个模板容器，可以用来包裹一段html代码，然后通过ngIf来控制这段html代码的显示与隐藏 -->
<!-- *ngIf="list.length === 0; then noData" 这个语法是ngIf的语法糖，它的意思是当list.length === 0时，显示noData这个模板
也就是说当list为空时，显示noData这个模板，否则不显示
如果<div> 在ng-template 里, 则会显示<div>no content</div>，否则会显示no content
-->
5.1.2 [hidden] Attribute Directives
根据条件显示 DOM 节点或隐藏 DOM 节点（display)
5.1.3 *ngFor
遍历数据生成HTML结构
interface List {
id: number
name: string
age: number
}
list: List[] = [
{
id: 1,
name: 'sam',
age: 20
},
{
id: 2,
name: 'jo',
age: 30
}
]
app.component.ts
import { Component } from '@angular/core';
import { Form, FormControl, FormGroup, NgForm } from '@angular/forms';
interface List {
id: number
name: string
age: number
}
// 组件类 被@Component装饰器装饰
@Component({
// 制定组件的使用方式, 当前问标记形式
// app-root => <app-root></app-root>
selector: 'app-root', // 当前组件调用的时候你要以什么形式去调用
templateUrl: './app.component.html', // 当前组件对应的模版是什么 组件模版文件路径
styleUrls: ['./app.component.css'], // 当前组件对应的样式文件
})
// 导出一个类
export class AppComponent {
list: List[] = [
{
id: 1,
name: 'sam',
age: 20
},
{
id: 2,
name: 'jo',
age: 30
}
]
}
// selector: '.app-root', // 当前组件调用的时候你要以什么形式去调用
// app-root => <div class="app-root"></div>
// selector: '[app-root]', // 当前组件调用的时候你要以什么形式去调用
// app-root => <div app-root></div>
app.component.html
<div *ngIf="list.length === 0; then noData; else listData"></div>
<ng-template #noData>
<div>no content</div>
</ng-template>
<ng-template #listData>
<ul>
<li *ngFor="let item of list ">
<p>
{{ item.id }}
{{ item.name }}
{{ item.age }}
</p>
</li>
</ul>
</ng-template>
app.component.ts
import { Component } from '@angular/core';
import { Form, FormControl, FormGroup, NgForm } from '@angular/forms';
interface List {
id: number
name: string
age: number
}
// 组件类 被@Component装饰器装饰
@Component({
// 制定组件的使用方式, 当前问标记形式
// app-root => <app-root></app-root>
selector: 'app-root', // 当前组件调用的时候你要以什么形式去调用
templateUrl: './app.component.html', // 当前组件对应的模版是什么 组件模版文件路径
styleUrls: ['./app.component.css'], // 当前组件对应的样式文件
})
// 导出一个类
export class AppComponent {
list: List[] = [
{
id: 1,
name: 'sam',
age: 20
},
{
id: 2,
name: 'jo',
age: 30
}
]
identity(index: number, item: List) {
console.log(index);
console.log(item);
return item.id;
}
}
// selector: '.app-root', // 当前组件调用的时候你要以什么形式去调用
// app-root => <div class="app-root"></div>
// selector: '[app-root]', // 当前组件调用的时候你要以什么形式去调用
// app-root => <div app-root></div>
app.component.html:
<div *ngIf="list.length === 0; then noData; else listData"></div>
<ng-template #noData>
<div>no content</div>
</ng-template>
<ng-template #listData>
<ul>
<li *ngFor="
let item of list;
let i = index;
let isFirst = first;
let isLast = last;
let isEven = even;
let isOdd = odd;
trackBy: identity;
" [ngClass]="{ even: isEven, odd: isOdd }">
<p>
{{ item.id }}
{{ item.name }}
{{ item.age }}
index {{ i }}
isFirst {{ isFirst }}
isLast {{ isLast }}
</p>
</li>
</ul>
</ng-template>
<!-- ngClass是angular提供的一个指令，用于动态添加或删除class -->
<!-- [ngClass]="{ even: isEven, odd: isOdd }" 是说如果isEven为true，则添加even这个class，如果isOdd为true，则添加odd这个class -->
<!-- .even {
background: pink;
}
.odd {
background: lightblue;
}
是说如果isEven为true，则添加even这个class，如果isOdd为true，则添加odd这个class
Angular 会自动帮我们添加这个class到对应的元素上 -->
app.component.css:
