場(chǎng)景

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

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

通過(guò)ViewChild不僅可以獲取dom還可以實(shí)現(xiàn)在父組件中調(diào)用子組件的方法。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

首先給子組件添加id 屬性

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

然后在ts中引入VIewChild

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

并通過(guò)

@ViewChild('child') child:any;

獲取子組件，括號(hào)里面的child 要與子組件的id相對(duì)應(yīng)。

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

?

為了測(cè)試調(diào)用子組件方法的效果，在父組件中添加一個(gè)按鈕并綁定點(diǎn)擊事件

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

然后在綁定的方法中

? getChildRun(){//調(diào)用子組件里面的方法this.child.run();}

效果

?

?

總結(jié)

以上是生活随笔為你收集整理的Angular中父组件通过ViewChild调用子组件的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。