AngularJS 2 基础教程Angular 2 JavaScript 环境配置Angular 2 TypeScript 环境配置Angular 2 架构Angular 2 架构 - 模块Angular 2 架构 - 组件Angular 2 构架 - 模板Angular 2 构架 - 元数据(Metadata)Angular 2 构架 - 数据绑定Angular 2 构架 - 指令(Directives)Angular 2 构架 - 服务(Services)Angular 2 构架 - 依赖注入Angular 2 数据显示Angular 2 数据显示 - 插值法Angular 2 数据显示 - ngForAngular 2 数据显示 - NgIfAngular 2 用户输入 - 绑定事件Angular 2 用户输入 - $event 对象Angular 2 用户输入 - 模板变量Angular 2 用户输入 - 按键事件过滤Angular 2 表单Angular 2 表单模型绑定Angular 2 表单数据验证Angular 2 提交表单Angular 2 模板语法
Angular 2 构架 - 指令(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 组件
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！