Javascript 如何正确地有条件地排除自定义组件，而不使用angular 5初始化它？

我有一个组件（名为card），它将另一个组件（名为graph）转包到另一个组件（名为edit）中，但我不希望组件B自行初始化。 因此，我尝试向

ng content

标记添加一个条件，但组件B仍在初始化自身

模板组件编辑：

<component-card>
    <component-graph></component-graph>
</component-card>

<mat-card>
   ...
   <mat-card-content *ngIf="open">
      <ng-content></ng-content>
      <!-- doesn't work too<ng-content *ngIf="open"></ng-content> -->
   </mat-card-content>
</mat-card>

这里的

open

总是false，但是组件图仍然在调用它的

ngOnInit

方法

因此，我尝试在组件卡中创建一个输出，当它发生变化时，会发出

open

值

在组件编辑中，我添加了一个新变量，该变量在每次更改时都处于打开状态：

<component-card (openStateChange)="displayGraph = $event>
    <component-graph *ngIf="displayGraph"></component-graph>
</component-card>

---

也许我遗漏了什么。。但是为什么我们不能将
ngIf
指令同时放在
mat卡
和
ng内容
？（在组件A的模板中）

这样，整个内容元素将不会初始化，从而阻止组件B加载

<mat-card>
...
   <mat-card-content *ngIf="open">
      <ng-content *ngIf="open"></ng-content>
   </mat-card-content>
</mat-card>


...
也许我遗漏了什么。。但是为什么我们不能将
ngIf
指令同时放在
mat卡
和
ng内容
？（在组件A的模板中）

这样，整个内容元素将不会初始化，从而阻止组件B加载

<mat-card>
...
   <mat-card-content *ngIf="open">
      <ng-content *ngIf="open"></ng-content>
   </mat-card-content>
</mat-card>


...
是的，我尝试过，但我不知道为什么组件B的
ngOnInit
仍然被调用（这是他在我的应用程序中使用的唯一位置），我每次都强制open为false，即使在使用
时，它仍然调用
ngOnInit
方法？这真是奇怪。。你确定你的发现吗？是的，我不知道为什么，我编辑了组件的名称，也许这会更容易理解。使用这种方法工作的事情是组件不会显示，但问题是它只生成一次（所以在我的情况下，它加载ma数据，我不想要它）是的，我试过了，但我不知道为什么组件B的
ngOnInit
仍然被调用（这是他在我的应用程序中使用的唯一位置），我每次都强制open为false，即使使用
，它仍然调用
ngOnInit
方法？这真是奇怪。。你确定你的发现吗？是的，我不知道为什么，我编辑了组件的名称，也许这会更容易理解。使用这种方法工作的事情是组件不会显示，但问题是它只生成一次（所以在我的情况下，它加载ma数据，我不想要它）