数据绑定

1. 架构：

           

  组件管理模板，    指令数据填充模板，      服务控制组件

        依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

         注入器维护了一个服务实例的容器，存放着以前创建的实例。

2. 模板与数据绑定
   1. 数据绑定  

数据方向
单向：从数据源至视图	{{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   实现自定义事件    

1. 1. 子：<button (click)="delete()">Delete</button>

             deleteRequest = new EventEmitter < Hero >();

                                 delete () {

                                         this . deleteRequest . emit ( this . hero );  

           }

       父： <app-hero-detail ( deleteRequest ) = "deleteHero($event)" ></app-hero-detail>

4. 双向绑定

4. ngIf
   1. <app-hero-detail*ngIf="isActive"></app-hero-detail>
5. ngFor
   1. <div*ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
6. ngSwitch

            

7. 模板引用变量 ( #var ): 模板引用变量通常用来引用模板中的某个DOM元素，它还可以引用Angular组件或指令或Web Component。
   1. <input#phoneplaceholder="phone number">
   2. <button(click)="callPhone(phone.value)">Call</button>
8. 
9. 安全导航操作符 ( ?. ) 和空属性路径
   1. Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式，用来保护出现在属性路径中 null 和 undefined 值
   2. Thecurrent hero's name is {{currentHero?.name}}