Question

所以我正在使用棱角分明，我试图制作一个点击按钮时消失的按钮。我试图使用[隐藏]，（点击）=＆＃34; showHide =！showHide＆＃34;，以及一堆其他方法。到目前为止没有任何工作。

我的HTML（目前）：

File.withWriter

和我的组件：

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

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

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

Answer 1

以下是如何实现这一目标：

在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

Answer 2

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

特别是＆＃34; Common Use＆＃34;部分应该对你有意思。

修改阅读下方的评论，您似乎没有注意到[hidden]和(click)实际上做了什么。 [hidden]控制元素的可见性，通常取决于某个条件。但(click)是将Click-Event绑定到元素的快速方法。

使用这两个工具可以通过更改变量来隐藏元素，如果用户点击您的元素（变量的新值可能由(click)调用的函数指定或内联，则为在示例代码中演示。）

编辑2：是的，你的意思是Angular2 / 4;）所以这应该可以胜任。

Answer 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 隐藏它 - 请注意隐藏属性可以被 CSS 覆盖，如果您正在更改 display 属性并且规则具有更多属性，则会发生这种情况优先级：

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

使用 CSS“手动”隐藏：

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

.hide-element {
   display: none;
}

带按钮的角度隐藏

3 个答案: