如何创建一个具有sub元素的组件

Question

我尝试在Angular 19中创建自己的组件，该组件类似于矩阵。在那里，我可以定义一个模板：

    <mat-card appearance="outlined">
        <mat-card-header>
            <h3>It's a kind of header</h3>
        </mat-card-header>

        <mat-card-content>
            Yippie, here comes my content.
        </mat-card-content>

        <mat-card-actions>
            act as you want
        </mat-card-actions>
    </mat-card>

这种模板是什么，所以我可以寻找一些示例？

tops：best parascus

所要寻找的技术称为contement投射

Answer 1

// the header section
@Component({
  selector: 'app-card-header',
  standalone: true,
  imports: [CommonModule],
  // note that it's possible to wrap this too, as it's a normal Angular component
  // we're just rendering whatever was passed into the component, to keep it simple
  template: '<ng-content />',
})
export class CardHeaderComponent {}

// the content section
@Component({
  selector: 'app-card-content',
  standalone: true,
  imports: [CommonModule],
  template: '<ng-content />',
})
export class CardContentComponent {}

// the footer section
@Component({
  selector: 'app-card-footer',
  standalone: true,
  imports: [CommonModule],
  template: '<ng-content />',
})
export class CardFooterComponent {}

// the wrapper component
@Component({
  selector: 'app-card',
  standalone: true,
  imports: [CommonModule],
  template: `
    <!-- this means: if there was an <app-card-header> passed to the component, render it here -->
    <ng-content select="app-card-header"></ng-content>
    <ng-content select="app-card-content"></ng-content>
    <ng-content select="app-card-footer"></ng-content>`
})
export class CardComponent {}

// this is how we use it
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    CardComponent,
    CardHeaderComponent,
    CardContentComponent,
    CardFooterComponent,
  ],
  template: `
    <app-card>
      <app-card-header>
        <h3>It's a kind of header</h3>
      </app-card-header>

      <app-card-content>
        Yippie, here comes my content.
      </app-card-content>

      <app-card-footer>
        <button>Act as you want</button>
      </app-card-footer>
    </app-card>`,
})
export class App {}

demo