angular-在父组件中调用子组件方法

基本思路：在父组件当中利用 @ViewChild 装饰器修饰子组件

代码示例：

1.子组件

//子组件HTML代码
<div style="border: 1px solid red">

	<h1>我是子组件</h1>
	
</div>

//子组件ts代码
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: 'child.component.html'
})
export class ChildComponent {

  constructor() { }

  ngOnInit() {
  }

  greeting(name: string) {
    console.log("hello" + name);
  }

}

2.父组件

//父组件HTML代码
<div style="border: 1px solid blue">

	<h1>我是父组件</h1>
	
	<child #ch></child>
	
	<button (click)="getChildMethod()">调用子组件方法</button>
	
</div>

//父组件ts代码
@ViewChild('ch') ChildComponent: any
//@ViewChild(ChildComponentPage) ChildComponent: ChildComponentPage

getChildMethod() {
	// 调用子组件方法
	this.ChildComponent.greeting('world');
}