Angular中父組件通過ViewChild調用子組件的方法

場景

Angualr中通過原生js和ViewChild的方式獲取dom:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105860965

通過ViewChild不僅可以獲取dom還可以實現在父組件中調用子組件的方法。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先給子組件添加id 屬性

<app-child #child></app-child>

然后在ts中引入VIewChild

import { Component, OnInit,ViewChild } from '@angular/core' ;

並通過

@ViewChild('child') child:any;

獲取子組件，括號里面的child 要與子組件的id相對應。

然后在子組件child的ts中添加一個方法run()

 

 

為了測試調用子組件方法的效果，在父組件中添加一個按鈕並綁定點擊事件

<button (click)="getChildRun()">獲取子組件的方法</button>

 

然后在綁定的方法中

  getChildRun(){

    //調用子組件里面的方法
     this.child.run();
     
  }

效果