import { Component,forwardRef } from '@angular/core''@angular/forms'@Component({
selector: 'app-child'<span style="color: #000000">,templateUrl: './child.component.html'<span style="color: #000000">,styleUrls: ['./child.component.css'<span style="color: #000000">],providers: [{
provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() =><span style="color: #000000"> ChildComponent),multi: <span style="color: #0000ff">true<span style="color: #000000">
}]
})
export class ChildComponent implements ControlValueAccessor {
constructor() { }
_data: any;
add () {
<span style="color: #0000ff">this.childData ++<span style="color: #000000">;
}
change = (value: any) => {}; <span style="color: #008000">//<span style="color: #008000"> 先定义一个方法,很重要,用于接收registerOnChange()方法里传递回来的方法,然后通过这个方法就能通知到外部组件数据更新。
set childData(value: number) { <span style="color: #008000">//<span style="color: #008000"> childData被更改走该方法
<span style="color: #0000ff">this._data =<span style="color: #000000"> value;
<span style="color: #0000ff">this.change(<span style="color: #0000ff">this._data); <span style="color: #008000">//<span style="color: #008000"> 将更新后的数据通知到外部组件
<span style="color: #000000"> }
get childData() { <span style="color: #008000">//<span style="color: #008000"> 页面或者方法里面有调用childData就会走该方法
<span style="color: #0000ff">return <span style="color: #0000ff">this<span style="color: #000000">._data;
}
writeValue(val): <span style="color: #0000ff">void { <span style="color: #008000">//<span style="color: #008000"> 初始化时,获取并监听父组件通过ngModel传递进来的数据
<span style="color: #0000ff">if<span style="color: #000000"> (val) {
<span style="color: #0000ff">this._data =<span style="color: #000000"> val;
}
}
registerOnChange(fn: any): <span style="color: #0000ff">void { <span style="color: #008000">//<span style="color: #008000"> 初始化后,执行该方法,并保存控件接收到 change 事件后,调用的函数
<span style="color: #0000ff">this.change =<span style="color: #000000"> fn;
}
registerOnTouched(fn: any): <span style="color: #0000ff">void<span style="color: #000000"> {
}
}
selector: 'app-child'<span style="color: #000000">,templateUrl: './child.component.html'<span style="color: #000000">,styleUrls: ['./child.component.css'<span style="color: #000000">],providers: [{
provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() =><span style="color: #000000"> ChildComponent),multi: <span style="color: #0000ff">true<span style="color: #000000">
}]
})
export class ChildComponent implements ControlValueAccessor {
constructor() { }
_data: any;
add () {
<span style="color: #0000ff">this.childData ++<span style="color: #000000">;
}
change = (value: any) => {}; <span style="color: #008000">//<span style="color: #008000"> 先定义一个方法,很重要,用于接收registerOnChange()方法里传递回来的方法,然后通过这个方法就能通知到外部组件数据更新。
set childData(value: number) { <span style="color: #008000">//<span style="color: #008000"> childData被更改走该方法
<span style="color: #0000ff">this._data =<span style="color: #000000"> value;
<span style="color: #0000ff">this.change(<span style="color: #0000ff">this._data); <span style="color: #008000">//<span style="color: #008000"> 将更新后的数据通知到外部组件
<span style="color: #000000"> }
get childData() { <span style="color: #008000">//<span style="color: #008000"> 页面或者方法里面有调用childData就会走该方法
<span style="color: #0000ff">return <span style="color: #0000ff">this<span style="color: #000000">._data;
}
writeValue(val): <span style="color: #0000ff">void { <span style="color: #008000">//<span style="color: #008000"> 初始化时,获取并监听父组件通过ngModel传递进来的数据
<span style="color: #0000ff">if<span style="color: #000000"> (val) {
<span style="color: #0000ff">this._data =<span style="color: #000000"> val;
}
}
registerOnChange(fn: any): <span style="color: #0000ff">void { <span style="color: #008000">//<span style="color: #008000"> 初始化后,执行该方法,并保存控件接收到 change 事件后,调用的函数
<span style="color: #0000ff">this.change =<span style="color: #000000"> fn;
}
registerOnTouched(fn: any): <span style="color: #0000ff">void<span style="color: #000000"> {
}
}
import { FormsModule } from '@angular/forms'
import { Component,// 这里的组件名为当前组件的名字
multi: = 2
writeValue(val):
- writeValue() 方法,将会使用表单模型中对应的初始值作为参数(也就是ngModel里的值)。
writeValue(val): .childData =
registerOnChange(fn: any): {
.change =
change = (value: any) => {};
然后就可以通过change方法通知外部组件了
set childData(value: number) {
._data =.change(._data);
}
import { Component,multi: = 1.childData ++.change(= (value: any) => {};
writeValue(val): {
.childData = {
.change =
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。