1.father.component.html:

<app-son #son></app-son>
<hr>
<button (click)='son.haha()'>调用son里的haha方法</button>

2.son.component.ts定义haha函数

haha(){
    console.log("this is son func");
  }

以上是在父html里面调用子组件的方法，那怎么在父ts里调用子组件的方法呢？继续阅读

3 father.component.ts引入 ViewChild,并和父html里面的子组件关联起来

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

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.css']
})
export class FatherComponent implements OnInit {

  @ViewChild('son') son;
  constructor() { }

  ngOnInit() {
    this.son.haha();
  }
}