从自定义组件获取ngModel的方法是通过实现ControlValueAccessor接口来实现双向绑定。以下是详细的步骤:
通过以上步骤,就可以在自定义组件中获取到ngModel的值,并实现双向绑定。
以下是一个示例代码:
import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'custom-input',
template: `
<input type="text" [(ngModel)]="value" (ngModelChange)="onChange($event)" (blur)="onTouched()">
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
]
})
export class CustomInputComponent implements ControlValueAccessor {
value: string;
onChange: (value: string) => void;
onTouched: () => void;
writeValue(value: string): void {
this.value = value;
}
registerOnChange(fn: (value: string) => void): void {
this.onChange = fn;
}
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
// Implement if needed
}
}
在使用自定义组件时,可以通过[(ngModel)]来进行双向绑定,如下所示:
<custom-input [(ngModel)]="myValue"></custom-input>
在上述示例中,myValue变量将与自定义组件中的value属性进行双向绑定。当自定义组件中的值发生变化时,myValue也会相应地更新。
领取专属 10元无门槛券
手把手带您无忧上云