了解 ng-content 是否为空 Angular 17

问题描述 投票:0回答:1

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

  <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,但它总是未定义/空,无论它是否实际上是空的。

angular
1个回答
0
投票

您可以指定这两种类型,

  • [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 演示

© www.soinside.com 2019 - 2024. All rights reserved.