Angular 2 构架 - 指令(Directives)
Angular 2 应用程序应用主要由以下 8 个部分组成
- 模块 (Modules)
- 组件 (Components)
- 模板 (Templates)
- 元数据 (Metadata)
- 数据绑定 (Data Binding)
- 指令 (Directives)
- 服务 (Services)
- 依赖注入 (Dependency Injection)
下图展示了每个部分是如何相互工作的
图中
-
模板 (Templates)是由 Angular 扩展的 HTML 语法组成
-
组件 (Components)类用来管理这些模板
-
应用逻辑部分通过服务 (Services)来完成，然后在模块中打包服务与组件， 最后通过引导根模块来启动应用
指令（Directives）
AngularJS 的模板是动态的，当 Angular 渲染它们时，它会根据指令对 DOM 进行修改
指令是一个带有 指令元数据 的类
在 TypeScript 中，要通过 @Directive 装饰器把元数据附加到类上
AngularJS 2 中包含以下三种类型的指令
- 属性指令：以元素的属性形式来使用的指令
- 结构指令：用来改变DOM树的结构
- 组件：作为指令的一个重要子类，组件本质上可以看作是一个带有模板的指令
<li *ngFor="let site of sites"></li> <site-detail *ngIf="selectedSite"></site-detail>
上面的代码中：
-
ngFor 告诉 Angular 为 sites 列表中的每个项生成一个 <li> 列表项
-
ngIf 表示只有在选择的项存在时，才会包含 SiteDetail 组件