Angular 2：如何在ngOnInit / ngOnChanges期間更改@Input屬性值

Question

問題

我正在創建一個具有2個@Input()屬性的組件，它們恰好相互依賴。 這是一個示例（您也可以看到這個問題 ）：

@Component({
  selector: 'my-select',
  template: `
    <ul>
      <li *ngFor="let item of items">
        {{ item }}
        <span *ngIf="item === default">(default)</span>
        <button *ngIf="item !== default" (click)="makeDefault(item)">Make default</button>
      </li>
    </ul>
  `,
}) export class MyInput implements OnInit {
  @Input() public items: string[] = [];

  @Input() public defaultValue: string;
  @Output() public defaultValueChange = new EventEmitter<string>();

  public makeDefault(item: string): void {
    this.defaultValue = item;
    this.defaultValueChange.emit(this.defaultValue);
  }

  public ngOnInit(): void {
    if (!this.defaultValue) {
      // choose the first item, since there always must be a default
      this.makeDefault(this.items[0]);
    }
  }
}

實際的問題是我在進行中的更改檢測周期內更改了@Input()屬性值，這不是很出色（並導致Angular引發錯誤）。 假設發生這種情況

<my-select [(default)]="defaultItem" ...></my-select>

使用語法，這正是預期的用法模式。

我可以通過用setTimeout包圍makeDefault調用來解決此問題，如下所示：

  public ngOnInit(): void {
    if (!this.defaultValue) {
      setTimeout(() => {
        this.makeDefault(this.items[0]);
      }, 0);
    }
  }

但這很丑，恕我直言。

處理這種交互模式的正確方法是什么？

Answer 1

要設置默認值，必須使用：

[defaultValue]="default"

不：

[(defaultValue)]="default"

簽出更新的plnkr 。 我也連接了defaultValueChange事件。

評論更新：

此外，使用在App類中聲明的默認值代替在my-app模板中初始化“默認”也可以解決此問題：

<my-select [(default)]="defaultItem" ...></my-select>

export class App {
  defaultItem = 'default';
  items = ['item 1', 'item 2', 'item 3'];
  constructor() {
    this.name = 'Angular2'
  }
}