angular - 有没有办法在 Angular 条件下抑制子组件初始化？

Question

所以我想做的是使用这样的模板创建简单的条件包装器组件:

<ng-container *ngIf="condition; else falseCondition">
    <ng-content *ngIf="condition"></ng-content>
</ng-container>
<ng-template #falseCondition>
    <div class="div">
        <div class="col-xs-12">
            <p translate="translate" class="text-center">{{message}}</p>
        </div>
    </div>
</ng-template>

我想这样使用它:

<myComponent [condtion]="someCondition" [message]="some message">
     <someOtherComponent [bindings]....></someOtherComponent>
</myComponent>

然而，即使 someCondition 为假并且 some message 像预期的那样显示，someOtherComponent 也会被初始化。有没有办法抑制该初始化？如果 condition 为假，我希望它根本不会被创建。

如果我不使用我的包装器组件(如下所示)，它会按预期工作，但使用 else 模板的普通 *ngIf - 其他组件根本没有初始化。

   <ng-container *ngIf="someCondition">
         <!-- this works just fine -->
         <someOtherComponent [bindings]....></someOtherComponent>
    </ng-container>

Answer 1

考虑到 myComponent不是指令而是应该有自己的模板的组件，它不能阻止其内容以与 ngIf 相同的方式编译指令确实如此。

这可以通过提供 <ng-template> 来解决作为组件内容:

@Component({
  selector: 'myComponent',
  template: `
<ng-container [ngTemplateOutlet]="template" *ngIf="condition; else falseCondition">
    <ng-content *ngIf="condition"></ng-content>
</ng-container>
...
  `,
})
class MyComponent {
  @ContentChild(TemplateRef) template;
  ...
}

像这样使用它:

<myComponent [condtion]="someCondition" [message]="some message">
  <ng-template>
    <someOtherComponent [bindings]....></someOtherComponent>
  </ng-template>
</myComponent>