我试图显示在父组件onClick中隐藏动态添加的组件

Question

我试图隐藏使用模板和onClick从父组件*ngIf动态生成的子组件

尝试使用*ngIf，但子组件始终显示偶数。

（click）=“ checkStatus（$ event）”更改状态

<div class="contentColumn">
  <div *ngIf="item.content !== ''">
    <i class="" [class.icon-hover]="status ? 'clickChevronToShow' : 'clickChevronToHide'"
    (click)="checkStatus($event)" [ngClass]="status ? 'iconArrow fa fa-angle-double-up' : 'iconArrow fa fa-angle-double-down'"></i>
  </div>
  <span class="iconClose" [class.icon-hover]="clickIconToClose" (click)="onClickIcon($event)"></span>
</div>

<div *ngIf="status" [@enterAnimation]>
  <div class="sn-content" *ngIf="contentIsTemplate else regularContent">
    <ng-container *ngTemplateOutlet="content; context: item.context"></ng-container>
  </div>
  <ng-template #regularContent>
    <div class="sn-content" [innerHTML]="content"></div>
    <div [hidden]="!status" class="sn-content" component-host></div>
  </ng-template>
</div>

内容的innerHtml显示正确。 但是下一个主机不是。

Answer 1

要基于父组件的变量隐藏子组件，您需要将父组件的属性传递给子组件（使用@Input属性）。基于该属性，您必须使用该属性编写ngIf语句。