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为false且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>

有没有办法在角度条件下抑制子组件初始化？

1 个答案: