1月学习ng

angular 权威教程 ng-book2（前四章上个月看过了） 第五章开始
 第五章form表单验证
FormControl 代表单一的输入字段，他是angular表单中的最小单元。
FormGroup 管理一组FormControl 。用FormGroup获取value的时候会获取到一个“键值对” 他能够一次性获取里面所有的FormControl值不需要遍历。
FormBuilder 里面包含了FormGroup，FormControl  
angular有两种表单的使用方式 FormsModule 和 ReactiveFormsModule
FormsModule 主要为我们提供了ngModle NgForm
ReactiveFormsModule 提供了 formControl ngFormGroup


ngForm给我们提供了两个重要的功能
(1) 一个叫ngForm的FormGroup对象
(2) 一个输出事件（ngSubmit）
使用ngForm和ngControl隐式构建FormControl和FormGroup的方法


RouterModule.forChild() 与 Router.forRoot() 方法类似，但它只能应用在特性模块中。
友情提示：根模块中使用 forRoot()，子模块中使用 forChild()


<a routerLink="/settings/password" routerLinkActive="active">Change password</a>
通过使用 routerLinkActive 指令，当 a 元素对应的路由处于激活状态时，active 类将会自动添加到 a 元素上。


this.router.navigate(['/settings']);




组件之间传递
@Component({
    selector: 'exe-greet',
    template: `
    <div class="border">
        <p>Greet Component</p>  
        <ng-content></ng-content>
    </div>
    `,
    styles: [` .border { border: 2px solid #eee; } `]
})
@Component({
  selector: 'my-app',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-greet>
      <p>Hello Semlinker</p>
    </exe-greet>
  `,
})
<ng-content></ng-content> 将被渲染成为 传入的<p>Hello Semlinker</p>


可以根据属性筛选
@Component({
    selector: 'exe-greet',
    template: `
    <div class="border">
        <p>Greet Component</p>  
        <div style="border: 1px solid #666;margin: 4px;">
            <div style="border: 1px solid red;margin: 5px;">
                <ng-content></ng-content>
            </div>
            <div style="border: 1px solid green;margin: 5px;">
                <ng-content></ng-content>
            </div>
            <div style="border: 1px solid blue;margin: 5px;">
                 <ng-content></ng-content>
            </div>
        </div>
    </div>
    `,
    styles: [` .border { border: 2px solid #eee; } `]
})


@Component({
  selector: 'my-app',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-greet>
      <header>Card Header</header>
          <div class="card_body">Card Body</div>
      <footer>Card Footer</footer>
    </exe-greet>
  `,
})


ContentChild 与 ViewChild 的异同点


相同点
都是属性装饰器
都有对应的复数形式装饰器：ContentChildren、ViewChildren
都支持 Type<any>|Function|string 类型的选择器


不同点
ContentChild 用来从通过 Content Projection 方式 (ng-content) 设置的视图中获取匹配的元素
ViewChild 用来从模板视图中获取匹配的元素
在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 ContentChild 查询的元素
在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取通过 ViewChild 查询的元素




1.宿主元素属性和事件绑定风格指南
优先使用 @HostListener 和 @HostBinding ，而不是 @Directive 和 @Component 装饰器的 host 属性：
对于关联到 @HostBinding 的属性或关联到 @HostListener 的方法，要修改时，只需在指令类中的一个地方修改。 
如果使用元数据属性 host，你就得在组件类中修改属性声明的同时修改相关的元数据。




Zone 是一个全局的对象，用来配置有关如何拦截和跟踪异步回调的规则。Zone 有以下能力：
拦截异步任务调度
提供了将数据附加到 zones 的方法
为异常处理函数提供正确的上下文
拦截阻塞的方法，如 alert、confirm 方法