Angular 6嵌套模板视图

<!-- 父组件模板 -->
<app-child-component></app-child-component>

// 子组件
export class ChildComponent {
  @Input() data: any;
}

<!-- 父组件模板 -->
<app-child-component [data]="parentData"></app-child-component>

// 子组件
export class ChildComponent {
  @Output() notifyParent = new EventEmitter<void>();

  someMethod() {
    this.notifyParent.emit();
  }
}

<!-- 父组件模板 -->
<app-child-component (notifyParent)="parentMethod()"></app-child-component>

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h1>Parent Component</h1>
      <app-child [data]="parentData" (notifyParent)="parentMethod()"></app-child>
    </div>
  `
})
export class ParentComponent {
  parentData = { message: 'Hello from parent' };

  parentMethod() {
    console.log('Parent method called');
  }
}

// child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <div>
      <h2>Child Component</h2>
      <p>{{ data.message }}</p>
      <button (click)="someMethod()">Notify Parent</button>
    </div>
  `
})
export class ChildComponent {
  @Input() data: any;
  @Output() notifyParent = new EventEmitter<void>();

  someMethod() {
    this.notifyParent.emit();
  }
}