5-8.Angular 入門教學 - 使用@ViewChild讓父元件在程式碼中呼叫子元件的方法

接續上一篇是在html使用子元件的方法

但有時候情境並沒有這麼單純，我們可能需要在父元件的程式碼這邊做一些操作

所以需要在程式碼中呼叫子元件的方法，那這時候可以使用@ViewChild來完成

我們在SectionComponent上方做以下的宣告，隨後就可以使用子元件的方法(但前提是要在html中你有放該子元件的標籤)

export class SectionComponent implements OnInit {
  @ViewChild(TodoInfoModalComponent)
  private todoInfoModalComponent!: TodoInfoModalComponent;
  
  modalShow(item: Todo) {
    this.nowSelectTodo = item;
    this.todoInfoModalComponent.show();
  }
}

section.component.html部分改這樣

<button (click)="modalShow(item)" *ngIf="item.CanEdit" class="destroy2">i</button>

那存檔後，就可以試試有沒有正常運作

基本上除了方法，值一樣是可以讀取的，子元件只要是public的內容都可以使用這個方式取用