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

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

我是 Angular 的新手，我很困惑为什么这行不通。

Answer 1

以下是实现该目标的方法：

In your 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:

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

PLUNKER DEMO

Answer 2

你的HTML

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

你的打字稿

export class AppComponent {
   private isButtonVisible = true;
}

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

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

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

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

尤其是 "Common Use" 部分您应该会感兴趣。

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

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

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

Answer 3

这是 hide/remove 项目的简洁方法，如果有项目列表，特别方便。

请注意它如何利用 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 隐藏它 - 注意隐藏属性可以被 CSS 覆盖，如果你改变 display 属性并且规则具有更高的优先级：

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

“手动”隐藏它 与 CSS:

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

.hide-element {
   display: none;
}

Angular 使用按钮隐藏

Angular Hide With Button

html

show-hide

typescript

angular