带按钮的角隐藏

Question

所以我正在使用 Angular，我正在尝试制作一个按钮，当点击它时会消失。我曾尝试使用 [hidden] 、 (click)="showHide = !showHide" 以及其他一些方法。到目前为止没有任何工作。

我的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>

和我的组件：

 export class AppComponent {
   inboundClick = false;
}

本质上，我在一个页面上有 2 个按钮，当单击一个按钮时，我想隐藏两个按钮并显示一组新按钮。

我对 Angular 很陌生，我很困惑为什么这不起作用。

原文由 RaptorJesus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你的 HTML

 <div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false">
...
</div>

你的打字稿

export class AppComponent {
   private isButtonVisible = true;
}

这应该可以完成这项工作。 *ngIf 自动隐藏元素，如果条件评估 false ，所以将变量设置为 false 就足够了。

我在这里看到的问题是，您在任何时候都无法控制可见性。每当您尝试更改用户交互中的元素时，使用 [ngClass] 添加特定类（如果满足条件）或 *ngIf 很有帮助。

有关 [ngClass] 的更多信息，您可以在此处阅读其用法： https ://angular.io/api/common/NgClass

您可以在此处阅读有关 *ngIf 的信息： https ://angular.io/api/common/NgIf

特别是“常用”部分对您来说应该很有趣。

编辑： 阅读您下面的评论，您似乎没有注意到 [hidden] 和 (click) 实际上做了什么。 [hidden] 控制元素的可见性，通常取决于特定条件。 (click) 然而，这是一种将 Click-Event 绑定到元素的快速方法。

如果用户单击您的元素，则使用这两种工具可以通过更改变量来隐藏元素（变量的新值可以由 (click) 或内联调用的函数分配，如图所示在示例代码中）。

Edit2： 是的，您的意思是 Angular2/4 ;) 所以这应该可以完成工作。

原文由 GxTruth 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以通过以下方式实现这一目标：

在你的 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>

…在你的 AppComponent 中：

 export class AppComponent {
    inboundClick = true;
    outboundClick = true;
}

---

柱塞演示

原文由 FAISAL 发布，翻译遵循 CC BY-SA 3.0 许可协议