Angular 用 ngModel 实现我自己的组件

Question

我有以下 HTML，并希望在 input 或 my-component 更改时同步 myModel。

<input type="text" [(ngModel)]="myModel" />
<my-component [(ngModel)]="myMdoel></my-component>

有什么想法吗？

编辑：

<div *ngFor="let item of items">
    <input type="text" name="item{{item.name}}" [(ngModel)]="item.name" />
    <my-component [(model)]="item.name" [datasource]="source"></my-component>
</div>

我的组件

<button type="button" *ngFor="let s of datasource" (click)="selectItem(s)">{{s}}</button>

export class MyComponent ... {
    _model: any;

    @Input()
    get model(): any {
        return this._model;
    }

    @Input()
    set model(value: any) {
        this._model = vaue;
    }

    @Output() modelChange: EventEmitter<any> = new EventEmitter<any>();

    @Input() datasource: any[];

    ...

    selectItem(item: any): void {
        this._model = item;
        this.modelChange.emit(this._model);
    }
}

Answer 1

你可以只在你的组件上使用一个变量并使用@Input事件发射器，如下所示

<my-component [myModelVar]="myMdoel></my-component>

在你的 my-componnet.ts 中

@input myModelVar;

这里 myModelVar 将在您更新父组件上的 myModel 时进行更改