本文由Scarb发表于金甲虫的博客,转载请注明出处

Angular 笔记

Flex 布局

*ngFor

  • 变量的应用范围

  • 索引的获取
1
2
3
4
5
<ul>
<li *ngFor="let item of topMenus; let i = index">
<a href="{{item.link}}">{{item.title}}</a>
</li>
</ul>
  • 第一个和最后一个
1
2
3
4
5
<ul>
<li *ngFor="let item of topMenus; let first = first; let last = last">
<a href="{{item.link}}">{{item.title}}</a>
</li>
</ul>
  • 奇和偶
1
2
3
4
5
<ul>
<li *ngFor="let item of topMenus; let odd = odd; let even = even">
<a href="{{item.link}}">{{item.title}}</a>
</li>
</ul>
  • trackBy 提升性能
1
2
3
4
5
<ul>
<li *ngFor="let item of topMenus; trackBy: trackElement">
<a href="{{item.link}}">{{item.title}}</a>
</li>
</ul>

样式绑定的几种方式

  • 执行class属性,用于单个样式的条件绑定最为合适
1
<div [class.className]="条件表达式">...</div>
  • 添加class属性,true则添加,false则不添加
1
<div [ngClass]="{'one': true, 'two': true, 'three': false}">...</div>
  • 添加样式
1
<div [ngStyle]="{'color': someColor, 'font-size': fontSize}">...</div>

组件生命周期

在组件类中引用模板资源

双向绑定 ngModel

  • FormsModule中提供的指令
  • 使用[ngModel] = "变量" 形式进行双向绑定
  • 其实是一个语法糖
1
<input [ngModel]="username" (ngModelChange)="username = $event"></input>

共享模块

将某个模块中,其他多个模块需要用到的组件、指令和管道导入到共享模块中。

其他每个模块都导入共享模块

指令的样式和事件绑定

指令没有模板,要寄宿在一个元素之上 - 宿主(Host)

  • @HostBinding绑定宿主的属性或者样式
  • @HostListener绑定宿主的事件

组件的样式中也可使用:host这样的一个伪类选择器

投影组件

  • ng-content:组件的动态内容
  • select属性可以选择可用的样式类/HTML标签/指令
1
<ng-content select="样式类/HTML标签/指令"></ng-content>
  • 适用场景
    • 动态内容
    • 容器组件

路由

路由定义

1
2
3
4
5
6
7
8
9
10
11
const routes: Routes = [							// 按列表顺序匹配,匹配成功则直接返回,忽略后续匹配
{path: '', component: HomeComponent}, // 匹配空路径,一般使用redirectTo到主页面
{path: 'path', component: FeatureComponent}, // 匹配路径
{path: '**', component: PageNotFoundComponent} // 匹配所有路径
];

@NgModule({
imports: [RouterModule.forRoot(routes)], // 根路由用forRoot(),子路由用forChild()
exports: [RouterModule]
})
export class AppRoutingModule { }

子路由写法

1
2
3
4
5
6
7
8
9
10
11
12
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
children: [
{
path: ':id', // 支持变量名
component: ChildComponent
}
]
}
]

管道

依赖注入

声明和使用依赖注入

  1. 提供服务
    • @Injectable()将服务标记为可供注入的服务
  2. 模块中声明
    • providers或者import对应模块
  3. 在组件中使用
    • 构造函数中直接声明
    • Angular框架完成自动注入

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@Injectable()
class Product {
constructor(private name: string, private color: string) {
}
}

@Injectable()
class PurchaseOrder {
private amount: number;

constructor(private product: Product) {
}
}

const injector = Injector.create({
providers: [
{
provide: Product,
// useClass: Product,
// useExisting: product,
useFactory: () => {
return new Product('大米手机', '黑色');
},
deps: []
},
{
provide: PurchaseOrder,
useClass: PurchaseOrder,
deps: [Product]
}
]
});
console.log(injector.get(Product));
console.log(injector.get(PurchaseOrder));
}