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>. Есть ли что-то еще, что мне нужно настроить?

Answer 1

На самом деле, вам необходимо явно вызвать onChange обратного вызова, который зарегистрирован by 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() вызывается, когда @Input() сек значения изменяются:

@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 
}