如果 Angular 中不存在 ng-content，如何隐藏元素？

Question

如果 Angular 中不存在 ng-content 如何隐藏元素？

<mat-card>
    <mat-card-header #title *ngIf="title"> <-- title
        <mat-card-title>
            <ng-content select="[title]"></ng-content>
        </mat-card-title>
    </mat-card-header>
    <mat-divider *ngIf="title"></mat-divider>
    <mat-card-content>
        <ng-content select="[content]"></ng-content>
    </mat-card-content>
</mat-card>

如果ng-container title不存在，则在上面的组件中隐藏mat-card-header

<card>
  <ng-container title>
    title
   </ng-container>
   <ng-container content>
    ....
   </ng-container>
</card>

@Component({
    selector: 'card',
    templateUrl: './card.component.html',
    styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {
    @ViewChild('title', {static: true}) titleRef: ElementRef;
    
    title = true;
    // contentExists = true;

    constructor() {
    }

    ngOnInit(): void {
    if ((this.titleRef.nativeElement.innerHTML ?? '').trim() === '') {
            this.title = false;
    }

TS逻辑

Answer 1

这应该移到 NgAfterViewInit 循环中，因为可以在循环中最早访问元素引用。

    ngAfterViewInit(): void {
    if ((this.titleRef.nativeElement.innerHTML ?? '').trim() === '') {
            this.title = false;
    }

我在你的例子中没有看到整个上下文，但我不会添加不必要的 TS 代码（@ViewChild）只是为了得到一个布尔值。这都可以在模板中完成。

此外，请记住，该模板是从最高层到最低层呈现的。

现在，如果我们根据某些子层结果在模板中更改父元素（例如，ng-content 子结果将删除 mat-card 父元素），那么我们将开始获得 Expression has changed 错误，因为模板本身发生了变化。 mat-card 在整个渲染周期完成之前被删除。确保从父级 -> 子级开始渲染内容，在任何时候都不要倒退。

首先找出 mat-card 是否值得渲染？
然后如果 title 应该被渲染。
然后如果 content 应该渲染等等...

<mat-card *ngIf="item">

  <ng-container *ngIf="title">
    <mat-card-header #title>
      <mat-card-title>
        <ng-content select="[title]"></ng-content>
      </mat-card-title>
    </mat-card-header>
    <mat-divider></mat-divider>
  </ng-container>

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

如果 Angular 中不存在 ng-content，如何隐藏元素？

How to hide element if ng-content dont exists in Angular?

angular