ng-content中的引用组件变量

// 父组件
@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h1>父组件</h1>
      <ng-content></ng-content>
    </div>
  `,
})
export class ParentComponent {
  parentProperty: string = '父组件属性';

  parentMethod(): void {
    console.log('父组件方法');
  }
}

// 子组件
@Component({
  selector: 'app-child',
  template: `
    <div>
      <h2>子组件</h2>
      <p>{{ parentProperty }}</p>
      <button (click)="parentMethod()">调用父组件方法</button>
    </div>
  `,
})
export class ChildComponent {
  @Input() parentProperty: string;
  @Output() parentMethod = new EventEmitter<void>();
}

// 使用组件
<app-parent>
  <app-child [parentProperty]="childProperty" (parentMethod)="childMethod()"></app-child>
</app-parent>