带按钮的角隐藏

Posted 2023-03-13

【中文标题】带按钮的角隐藏

【英文标题】：Angular Hide With Button

【发布时间】：2018-01-14 21:37:03

【问题描述】：

所以我正在使用 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 很陌生，我很困惑为什么这不起作用。

【问题讨论】：

您在组件中有拼写错误：flase 应该是 false。您能否在问题中包含您希望显示/隐藏的按钮的模板

@0mpurdy 在实际代码中没有拼写错误。

好的，只是检查一下 :) 尝试在here's a template 中复制问题可能也是值得的。隐藏的最佳指令可能是*ngIf - here's a tutorial

【参考方案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 ;) 所以这应该可以完成这项工作。

【讨论】：

Angular 现在引用 Angular 2.0.0 以上的所有版本，而 AngularrJS 引用之前的所有版本。所以实际上我正在使用 Angular 4，但它与 2 类似，现在使用相同的名称。

这也很好用。有没有办法把元素带回来？

是的！ *ngIf 不会隐藏元素，如果条件评估为true，那么将变量isButtonVisible 设置为true 就足够了。只需将(click) 事件代码更改为(click)="this.isButtonVisible = !this.isButtonVisible" 之类的切换功能即可。但是，您可以在任何地方设置变量（这可以是另一个按钮，如重置按钮）。

@RaptorJesus 我只记得*ngIf 和[hidden] 之间还有另一个重要区别。虽然[hidden] 将元素设置为display: none 从而使其不可见，但使用*ngIf 从DOM 中删除 元素，在再次显示时重置它的状态。例如，如果您使用*ngIf 隐藏一个可滚动的消息列表，并且它的条件稍后变为true，您将再次从头开始，就像您第一次加载它一样。 [hidden] 避免了这个 afaik，因为它只是隐藏了元素，但它“仍然存在”。

hidden 和 *ngIf 之间存在巨大差异。如果目标的可见性将被切换很多，则前者是要走的路，否则是后者。虽然在这种情况下*ngIf* 可能是最好的做法，但我认为接受的答案至少应该提到hidden 属性，因为它是标题所包含的内容，因此是引导其他读者的关键字。

【参考方案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;

---

PLUNKER DEMO

【讨论】：

这非常有效。我没有意识到您必须同时使用 [hidden] 和 (click)。最后，如果单击了不同的按钮，您是否可以在组件中使用不同的变量来翻转它以再次显示它？

检查我创建的这个 plunker 链接：plnkr.co/edit/BGIQZV7V69pYUPuO2sFV?p=preview

@RaptorJesus 为什么投反对票？该解决方案根据您的要求工作。奇怪：/

对不起，你的答案确实有效，但经过更多研究 *ngif 是首选方法。 [隐藏] 一般认为尽可能避免。经过更多的工作，我确实需要从 DOM 中删除对象，这就是 *Ngif 所做的。因为它确实有效，所以我会重新投票。

谢谢，我的回答是基于你的问题描述，这就是为什么我使用[hidden]

【参考方案3】：

这是一种隐藏/删除项目的巧妙方法，如果有项目列表，则特别方便。

注意它如何利用Angular's template variables (#ListItem)。

所以你的模板可以是这样的：

<a type="button" #ButtonA
   (click)="onClick(ButtonA)" 
   [routerLink]="['/inbound']" href="">
</a>

<a type="button" #ButtonB
   (click)="onClick(ButtonB)" 
   [routerLink]="['/outbound']" href="">
</a>

或者像这样：

<ng-container *ngFor="let item of list">
  <div #ListItem>
    <button (click)="onClick(ListItem)">
  </div>
</ng-container>

取决于你想如何隐藏 - 如果你想从 DOM 中删除它，或者只是用 CSS 隐藏它。并且取决于您是要切换它还是完全删除它。有几个选项：

从 DOM 中移除元素（无法取回）：

close(e: HTMLElement) 
   e.remove();

用hidden attribute 隐藏它 - 注意 hidden 属性可以被 CSS 覆盖，如果你更改 display 属性并且规则具有更高的优先级，就会发生这种情况：

close(e: HTMLElement) 
   e.toggleAttribute('hidden');

使用 CSS“手动”隐藏：

close(e: HTMLElement) 
   e.classList.toggle('hide-element');

.hide-element 
   display: none;