如何在自定义 Angular 组件中禁用 ngModel 的默认行为？

Question

我正在调试使用 ng-select 的组件，每次我输入输入时，我的 ngModel 都会发生变化，即使我在视图中没有使用 ngModel。我已经删除了对 ngModel 的所有使用，只保留了类属性。

<div>
  <div class="invlisible" #list>
    <div *ngFor="let item of items">{{item}}</div>
  </div>
  <div class="invlisible" #value>{{ngModel}}</div>
  <ng-select [items]="items"
             [clearable]="false"
             [loading]="loading"
             [placeholder]="placeholder"
             [typeahead]="typeahead">
  </ng-select>
</div>

当我将“x”放入 ng-select 输入时，我的 ngModel 正在发生变化，我已经删除了对 ngModel 的所有使用，只有这在我的组件中：

@Component({
  selector: 'disco-ng-select',
  templateUrl: './disco-ng-select.component.html',
  styleUrls: ['./disco-ng-select.component.scss']
})
export class DiscoNgSelectComponent extends CSSProps implements OnInit, OnDestroy {
  private _value: any;

  @Input() public items: any[];
  @Input() public loading: boolean;
  @Input() public placeholder: string;
  @Input() public typeahead: Observable<any[]>;
  @Input() public ngModel: any;
  @Output() public ngModelChange = new EventEmitter<any>();

  constructor(
    _host: ElementRef) {
    super(_host);
  }
  public onChange(value: any) {
    this.ngModelChange.emit(value);
  }
}

ngModel 没有以任何方式连接到我的组件，但它的值在我输入时正在改变。当我输入空输入并在该输入中输入文本时也会发生同样的情况，ngModel 正在改变。

如何使 ngModel（我想使用 ngModel 而不是 [model]="value"）与普通的双向数据绑定一样工作？

Answer 1

您可以使用 Angular 提供的特定语法来创建类似的行为，但使用自定义名称。

它正在行动中：https://stackblitz.com/edit/angular-ta6sic?file=src%2Fapp%2Fapp.component.html

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  _name: string;
  @Input() get name() { return this._name; }
  @Output() nameChange = new EventEmitter<string>();

  set name(value) {
    this._name = value;
    this.nameChange.emit(this._name);
  }
}

你必须

• 创建一个私有属性来保存值 (_name)
• 创建将返回私有属性的 getter 输入
• 创建一个具有输入名称的事件发射器，后跟Change
• 创建一个设置器，它将设置私有属性的值并通过事件发射器发出更改。

这样，你可以像这样使用组件：

<hello [(name)]="name"></hello>