我有这个简单的卡片组件。
<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,但它总是未定义/空,无论它是否实际上是空的。
您可以指定这两种类型,
[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);
}
}