angular使用@viewChild父组件获取子组件的数据和方法

一、 父组件通过局部变量获取子组件的引 用  ，主动获取子组件的数据和方法

1、 使用#给子组件命名为#footer

<app-footer #footer></app-footer>

2、父组件直接获取执行子组件footer的方法

<button (click)='footer.footerRun()'>获取子组件的数据</button>

二、 通过 ViewChild 主动获取子组件的数据和方法

1、使用#给子组件命名为#

<app-footer #footerChild></app-footer>

2、引入 ViewChild

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

3、ViewChild  和刚才的子组件关联起来

@ViewChild('footerChild') footer;

4、调用子组件footer的方法

run(){
this.footer.footerRun();
}