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

Posted 2023-03-13

【中文标题】如何在单击事件Angular5上显示组件选择器

【英文标题】：How to show component selector on click event Angular5

【发布时间】：2019-02-04 23:59:24

【问题描述】：

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

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

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

表示将应用隐藏和显示类 任何帮助 谢谢

【参考方案1】：

为什么不使用隐藏：

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

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

【讨论】：

@RiteshDoomra 如果对您有帮助，请不要忘记接受答案

【参考方案2】：

为什么不使用*ngIf

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