如何在单击事件 Angular5 上显示组件选择器

Question

我在点击事件中显示另一个组件时遇到问题，这是我的代码：

<div (click)="showThis = true"></div>
<div class="" [ngClass]="{'hide': showThis}"></div>
<div class="" [ngClass]="{'show': showThis}">
  <another-screen></another-screen>
    </div>

它同时显示，首先应该在没有任何点击的情况下显示，如果有点击事件则这个组件先隐藏，然后另一个组件显示

表示隐藏和显示 class 将适用任何帮助谢谢

Answer 1

为什么不用*ngIf

<div (click)="showThis = true"></div>
<div *ngIf="!showThis "></div>
<div *ngIf="showThis ">
  <another-screen></another-screen>
</div>

Answer 2

为什么不使用隐藏：

<div (click)="showThis = true"></div>
<div class="" [hidden]="!showThis"></div>
<div class="" [hidden]="showThis">
    <another-screen></another-screen>
</div>

*ngIf 从 DOM 中删除 html 元素，但 [hidden] 用于显示 none 或块 html 元素，与隐藏和显示相同

如何在单击事件 Angular5 上显示组件选择器

How to show component selector on click event Angular5

ng-class

angular-components

angular5