在 Angular 中在 ViewInit 之后渲染一个子组件

Question

    <ng-container *ngIf="isTrue; else notTrue">
      <app-child
        [property1]="value"
        [property2]="value"
        [property3]="value"
        (function1)="func($event)"
      ></app-child>
    </ng-container>
    <ng-template #notTrue>
     <app-child
        [property1]="value"
        [property2]="value"
        (function1)="func($event)"
      ></app-child>
    </ng-template>

我想在父组件的 afterViewInit() 钩子之后初始化并渲染包裹在 <ng-template #notTrue> 中的子组件。怎么做？

PS 我正在使用 Angular 9

Answer 1

在此模板的父组件中，您可以实现 AfterViewInit 并设置 isTrue = true，如下所示：

export class ParentComponent implements AfterViewInit {
    isTrue: boolean;

    ngAfterViewInit() {
        this.isTrue = true;
    }
}

Answer 2

无论你做什么，如果你希望它在生命周期的那个点发生，你应该在 ngAfterViewInit 中执行逻辑来确定你的 *ngIf。

但是，这仍然会导致您的 ng-template 在 ngAfterViewInit 触发切换之前呈现。如果您不想在视图初始化之前呈现任何内容（假设您的输入未定义并且它破坏了子组件的 ngOnInit 逻辑或其他东西）那么您总是可以将另一个布尔值放入 class 并设置它在 ngAfterViewInit() 上为真。然后，将两样东西都包裹在 a

中

<ng-container *ngIf="viewHasInitialized">
...app-child components...
</ng-container>

在 Angular 中在 ViewInit 之后渲染一个子组件

render a child component afterViewInit in Angular

typescript

angular-components

angular