ngModel在自定義組件工作的一種方式只

Question

可以說我有一個組件

const DEFAULT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => MyComp), multi: true})); 

@Component({ 
selector: 'my-comp', 
    template: ` 
    <another-one></another-one> 
    `, 
    providers: [DEFAULT_VALUE_ACCESSOR] 

，現在當我使用的組件，如：

@Component({ 
selector: 'app', 
template: `<my-comp [(ngModel)]="someValue"></my-comp> 
     <input [(ngModel)]="someValue" />` 
}) 
class App { 
    someValue: number = 5 
} 

值傳遞給<my-comp>成分，但是之後當輸入內部的值發生更改時，將更新ngModel，但不會更新<my-comp>。還有什麼我需要配置？當@Input()價值觀改變

Answer 1

事實上，你需要顯式調用被註冊的onChange回調由Angular2提供：

@Component({ 
    (...) 
}) 
export class MyComp implements ControlValueAccessor { 
    onChange = (_) => {}; 
    onTouched =() => {}; 

    writeValue(value: any): void { 
    (...) 
    } 

    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } 
    registerOnTouched(fn:() => void): void { this.onTouched = fn; } 
} 

例如，當您考慮此自定義組件的狀態更改時。這裏是點擊一個樣本：

@Component({ 
    (...) 
    template: ` 
    <div (click)="updateState()">Update state</div> 
    ` 
}) 
export class MyComp implements ControlValueAccessor { 

    writeValue(value: any): void { 
    this.internalState = value; 
    } 

    updateState() { 
    this.internalState = 'new state'; 
    this.onChange(this.internalState); 
    } 
} 

本文可以給你更多的提示（見 「NgModel兼容設備」）：

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

Answer 2

ngOnChanges()被稱爲：

@Component({ 
selector: 'my-comp', 
    template: ` 
    <another-one></another-one> 
    ` 
}) 
class MyComp { 
    @Input() someField:number; 

    ngOnChanges(changes) { 
    console.log(changes); 
    } 
} 

，現在當我使用的組件，如：

@Component({ 
selector: 'app', 
template: `<my-comp [someField]="someValue"></my-comp> 
     <input [(ngModel)]="someValue" />` 
}) 
class App { 
    someValue: number = 5 
}