渲染组件通过@ContentChild或@ContentChild传递

import { Component, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-base-card',
  template: `
    <div class="card">
      <div class="card-header">
        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
      </div>
      <div class="card-body">
        <ng-container *ngTemplateOutlet="bodyTemplate"></ng-container>
      </div>
    </div>
  `,
  styles: [`
    .card { border: 1px solid #ccc; padding: 10px; margin: 10px; }
    .card-header { font-weight: bold; }
    .card-body { margin-top: 10px; }
  `]
})
export class BaseCardComponent {
  @ContentChild('header') headerTemplate: TemplateRef<any>;
  @ContentChild('body') bodyTemplate: TemplateRef<any>;
}

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

@Component({
  selector: 'app-root',
  template: `
    <app-base-card>
      <ng-template #header>
        Custom Card Header
      </ng-template>
      <ng-template #body>
        This is the custom content of the card.
      </ng-template>
    </app-base-card>
  `
})
export class AppComponent {}