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 方法
第五章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 方法