Angular 隐藏并配合按钮使用

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;
}

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

我非常新手Angular，我非常困惑为什么这样不起作用。

- RaptorJesus

---

你在组件中拼写错误了：flase 应该是 false。你能否在问题中包含你想要显示/隐藏的按钮模板？ - 0mpurdy

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

好的，只是在检查 :) 也值得尝试在plunk中复制问题这里有一个模板。最好的隐藏指令可能是*ngIf - 这里有一个教程。 - 0mpurdy

Answer 1

您的HTML

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

你的TypeScript

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)调用的函数或内联方式进行演示）。

编辑2：是的，您指的是Angular2/4 ;) 所以这就行了。

- GxTruth

---

Angular现在引用所有2.0.0以上的版本，而AngularJS则指代此之前的所有版本。因此，实际上我正在使用Angular 4，但它与2类似并且现在使用相同的名称。 - RaptorJesus

这也非常有效。有没有办法将元素带回来？ - RaptorJesus

是的！如果条件评估为“true”，*ngIf不会隐藏元素，因此将变量isButtonVisible设置为“true”就足够了。只需将（click）事件代码更改为切换函数，例如（click）=“this.isButtonVisible =！this.isButtonVisible”。但是，您可以在任何地方设置变量（这可以是另一个按钮，例如重置按钮）。 - GxTruth

@RaptorJesus 我刚想起来 *ngIf 和 [hidden] 之间还有一个重要的区别。虽然 [hidden] 将元素设置为 display: none，使其不可见，但使用 *ngIf 删除了 DOM 中的元素，在再次显示时重置其状态。例如，如果您使用 *ngIf 隐藏了可滚动的消息列表，并且它的条件稍后变为 true，则会回到开头，就像第一次加载它一样。据我所知，[hidden] 可以避免这种情况，因为它只是隐藏了元素，但它仍然“存在”。 - GxTruth

hidden 和 *ngIf 之间有很大的区别。如果目标元素的可见性需要经常切换，则应该选择前者，否则选择后者。虽然在这种情况下，*ngIf* 可能是最佳实践，但我认为接受的答案至少应该提到 hidden 属性，因为标题包含它，并且是一个引导其他读者到这里的关键字。 - Mozgor

Answer 2

以下是实现方法：

在你的组件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演示

- FAISAL

---

这个完美地运作了。我之前没有意识到必须同时使用 [hidden] 和 (click)。最后，如果点击不同的按钮，你能否通过在组件中使用不同的变量来翻转它并再次显示出来？ - RaptorJesus

请检查我创建的 Plunker 链接：https://plnkr.co/edit/BGIQZV7V69pYUPuO2sFV?p=preview - FAISAL

@RaptorJesus为什么会被踩？该解决方案符合您的要求。很奇怪 :/ - FAISAL

抱歉伙计，你的答案虽然可行，但经过更多研究，ngif是首选方法。如果可能的话，通常应避免使用[hidden]。并且在进一步的工作中，我确实需要从DOM中删除对象，这就是Ngif所做的。我会重新发起投票，因为它确实有效。 - RaptorJesus

谢谢，我的答案是根据你的问题描述而来的，所以我使用了[hidden]。 - FAISAL

Answer 3

这里有一种巧妙的方法来隐藏/移除项目，特别适用于项目列表。

请注意它如何利用Angular的模板变量（#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属性来隐藏它 - 请注意，hidden属性可以被CSS覆盖，如果您更改了display属性并且规则具有更高的优先级，则会发生这种情况：

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

使用CSS手动隐藏：

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

.hide-element {
   display: none;
}

- Rui Marques