在angular 2中，从浏览器的子标签中调用父标签中的函数

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child (childEvent)="callParentFunction($event)"></app-child>
  `
})
export class ParentComponent {
  @Output() parentEvent = new EventEmitter();

  callParentFunction(data: any) {
    console.log('Data from child:', data);
    // 在这里编写父组件中的函数逻辑
  }
}

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

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <button (click)="callParentFunction()">Call Parent Function</button>
  `
})
export class ChildComponent {
  @ViewChild(ParentComponent) parentComponent: ParentComponent;

  callParentFunction() {
    const data = 'Hello from child';
    this.parentComponent.callParentFunction(data);
  }
}