Html 带按钮的角隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45549297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Hide With Button
提问by RaptorJesus
So I'm working with Angular and I'm trying to make a button that when clicked disappears. I have tried to use [hidden], (click)="showHide = !showHide", and a bunch of other methods. Nothing is working so far.
所以我正在使用 Angular，我正在尝试制作一个点击时消失的按钮。我曾尝试使用[hidden],(click)="showHide = !showHide"和许多其他方法。到目前为止没有任何工作。
My html (currently):
我的 html（当前）：
<div class="rows">
<div class="a-bunch-of-styles-for-my-button">
<a type="button" class="more-styles" (click)="inboundClick = !inboundClick" [routerLink]="['/inbound']" href="">
</a>
</div>
</div>
and my component:
和我的组件：
export class AppComponent {
inboundClick = false;
}
In essence I have 2 buttons on a page and when one button is clicked I want to hide both buttons and display a set of new buttons.
本质上，我在页面上有 2 个按钮，当单击一个按钮时，我想隐藏两个按钮并显示一组新按钮。
I'm very new to Angular and I'm very confused why this won't work.
我对 Angular 很陌生，我很困惑为什么这行不通。
回答by GxTruth
Your HTML
你的 HTML
<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false">
...
</div>
Your TypeScript
你的打字稿
export class AppComponent {
private isButtonVisible = true;
}
This should do the job. *ngIfautomatically hides the element, if the condition evaluates false, so setting the variable to falseis sufficient.
这应该可以完成工作。*ngIf如果条件为 ，则自动隐藏元素，false因此将变量设置为false就足够了。
The problem I see here is, that you don't control the visibility at any point. Using [ngClass] to add a specific class, if a condition is met, or *ngIfis helpful, whenever you try to change elements on user interaction.
我在这里看到的问题是，您在任何时候都无法控制可见性。*ngIf每当您尝试更改用户交互中的元素时，如果满足条件或有帮助，请使用 [ngClass] 添加特定类。
For more information on [ngClass], you can read about its usage here: https://angular.io/api/common/NgClass
有关 的更多信息[ngClass]，您可以在此处阅读其用法：https: //angular.io/api/common/NgClass
You can read about *ngIfhere: https://angular.io/api/common/NgIf
你可以在*ngIf这里阅读：https: //angular.io/api/common/NgIf
Especially the "Common Use" part should be interesting for you.
尤其是“常用”部分对您来说应该很有趣。
Edit:Reading your comment below it seems you did not notice what [hidden]and (click)actually do. [hidden]controls the visibility of the element, usually dependent on a certain condition. (click)however is a quick way to bind a Click-Event to your element.
编辑：读您的评论如下好像你没注意到什么[hidden]和(click)怎么做。[hidden]控制元素的可见性，通常取决于特定条件。(click)然而，这是一种将 Click-Event 绑定到您的元素的快速方法。
Using both of those tools enables to hide an element, by changing a variable, if a user clicks on your element (the new value of the variable may be assigned by a function called by (click)or inline, as demonstrated in the example code).
如果用户单击您的元素，则使用这两种工具可以通过更改变量来隐藏元素（变量的新值可以由调用(click)或内联的函数分配，如示例代码所示）。
Edit2:Yep, you meant Angular2/4 ;) So this should do the job.
Edit2: 是的，你的意思是 Angular2/4 ;) 所以这应该可以完成这项工作。
回答by Faisal
Here is how you can achieve that:
以下是您如何实现这一目标：
In your component.html:
在你的 component.html 中：
<a type="button" class="more-styles"
[hidden]="!inboundClick"
(click)="inboundClick = !inboundClick"
[routerLink]="['/inbound']" href="">
</a>
<a type="button" class="more-styles"
[hidden]="!outboundClick "
(click)="outboundClick = !outboundClick "
[routerLink]="['/outbound']" href="">
</a>
... and in your AppComponent:
...并在您的 AppComponent 中：
export class AppComponent {
inboundClick = true;
outboundClick = true;
}
