- 架构:
组件管理模板, 指令数据填充模板, 服务控制组件
依赖注入”是提供类的新实例的一种方式,还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
注入器维护了一个服务实例的容器,存放着以前创建的实例。
- 模板与数据绑定
- 数据绑定
数据方向 | |
单向:从数据源至视图 |
{{value}} //插值表达式
[target]=‘value’ //property、attribute、类、样式
bind
-
target
=
"value" //同上
|
单向:从视图至数据源 |
(target)='事件' //事件
on-target='事件'
|
双向 |
[(target)]='value'
bindon-target='value'
|
<app-hero-detail
[
hero
]
=
"currentHero"
></app-hero-detail> //传输的是表达式,参与计算
<app-hero-detail
hero
=
"currentHero"
></app-hero-detail> //
一次性字符串初始化,
不会参与计算
2. 事件
<input
[
value
]
=
"currentHero.name"
(
input
)
=
"currentHero.name=$event.target.value"
>
3. 使用
EventEmitter
实现自定义事件
- 子:<button (click)="delete()">Delete</button>
delete
()
{
this
.
deleteRequest
.
emit
(
this
.
hero
);
}
父:
<app-hero-detail
(
deleteRequest
)
=
"deleteHero($event)"
></app-hero-detail>
4. 双向绑定
- ngIf
- <app-hero-detail*ngIf="isActive"></app-hero-detail>
- ngFor
- <div*ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
- ngSwitch
- 模板引用变量 ( #var ): 模板引用变量通常用来引用模板中的某个DOM元素,它还可以引用Angular组件或指令或Web Component。
- <input#phoneplaceholder="phone number">
- <button(click)="callPhone(phone.value)">Call</button>
- 安全导航操作符 ( ?. ) 和空属性路径
- Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式,用来保护出现在属性路径中 null 和 undefined 值
- Thecurrent hero's name is {{currentHero?.name}}