Angular 2-如何调用同级组件中的函数？

import { Component, ViewChild, ElementRef } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="callChildFunction()">调用子组件函数</button>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  callChildFunction() {
    this.childComponent.childFunction();
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>子组件</p>
  `
})
export class ChildComponent {
  childFunction() {
    console.log('调用了子组件的函数');
  }
}