使用 ngmodel 將一個組件中的變量值獲取到另一個組件

Question

我有兩個組件first和second 。 從第二個組件，我調用第一個組件。 在第一個組件中，我有一個matslider模塊，我想將 slider開/關狀態添加到我的第二個組件ts文件中。 所以我首先得到那個值，但不知道如何將它傳遞給第二個組件。

first.component.html

<div>
<mat-slide-toggle class="toggles" 
(change)="OnToggle($event) 
[(ngModel)]="selected">Toggle</mat-slide-toggle>
</div>

第一個.component.ts

@Input() selected=false;
public OnToggle(event)
{
  this.selected = event.selected;
}

第二個.component.html

<div class="container">
<app-first> </app-first>
</div>

Answer 1

我認為您可以在第一個組件中使用 output 事件並在第二個組件中綁定到它。

這是例子：

第一個組件：

  @Output() selectedChange = new EventEmitter<boolean>();

  public OnToggle(event) {
  this.selected = event.selected;
  this.selectedChange.emit(this.selected);

}

第二組件：

<app-first (selectedChange)="onSelectedChange($event)"></app-first>


public onSelectedChange(selected: boolean) {
  console.log(selected);
}