angular4 - 在div上单击功能

Question

我想在页面加载后只看到div 2，然后点击div 2想要隐藏div 2并显示div 1，我想点击div 2没有单独的按钮。

<div class="div-1"><p>content 1</p></div>
<div class="div-2" (click)="on = true"><p>content 2</p></div>

Answer 1

在您的组件ts文件中，您需要有一个标志来显示和隐藏div，如下所示：

TS：

// set to true as we want to show div-2 at first 
public showDiv2: boolean = true;

在html中，我们将使用标记showDiv2隐藏并显示div：

HTML：

<div class="div-1" *ngIf="!showDiv2"><p>content 1</p></div>
<div class="div-2" *ngIf="showDiv2" (click)="showDiv2 = false"><p>content 2</p></div>

您可以阅读有关ngIf here

的更多信息