了解 ng-content 是否为空 Angular 17

Question

我有这个简单的卡片组件。

  <mat-card>
    <mat-card-header>
      <mat-card-title>
          <ng-content select="[card-title]"></ng-content>
      </mat-card-title>

      <mat-card-subtitle>
          <ng-content select="[card-subtitle]"></ng-content>
      </mat-card-subtitle>
    </mat-card-header>

    <mat-card-content>
      <ng-content select="[card-content]"></ng-content>
    </mat-card-content>

    <mat-card-actions>
      <ng-content select="[card-actions]"></ng-content>
    </mat-card-actions>
  </mat-card>

问题：

如何根据每个 ng-content 是否为空在 ts 文件中获取布尔值？

尝试使用ContentChild，ContentChildren和ViewChild，但它总是未定义/空，无论它是否实际上是空的。

Answer 1

您可以指定这两种类型，

• [foo]

  属性选择器 -> 需要

  ng-content

• #foo

  templateRef 变量 -> 需要

  @ContentChild

  。

通过这样做，我们可以对内容子项执行 if 检查并有条件地显示 HTML

家长：

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { ChildComponent } from './app/child/child.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChildComponent],
  template: `
    <app-child><div card-title cardTitle>Hello from Angular!</div></app-child>
    <br/>
    <app-child/>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

孩子：

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

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [],
  template: `
  @if(!!cardTitle) {
    <ng-content select="[card-title]"/>
  }@else {
    <div> Child not found! </div>
  }
  `,
})
export class ChildComponent {
  @ContentChild('cardTitle') cardTitle!: any;

  ngAfterContentInit() {
    console.log(this.cardTitle);
  }
}

Stackblitz 演示