Question

我的Angular应用程序中有两个按钮，我为其创建了特殊样式。用户只能突出显示一个按钮或另一个按钮，因此我想更新每个功能中两个按钮的两种样式，如下所示：

<button #allowButton class="btn btn-approve-unchecked" value="0" (click)="addToAllowList(allowButton, denyButton)">Allow</button>
<button #denyButton class="btn btn-deny-unchecked" value="0" (click)="addToDenyList(denyButton, allowButton)">Deny</button>

当我单击这些按钮并输入功能事件时，代码将如下所示：

addToAllowList(allowButton : any, denyButton : any) {
  allowButton.className = "btn btn-approve-checked";
  denyButton.className = "btn btn-deny-unchecked";
  ...more code here...
}

相同但相反的另一个功能。第一个按钮正在传递，样式正在正确更新，但不在DOM范围内的按钮将被传递为null。有没有正确的方法来做到这一点，或者我是否会出错？

Answer 1

通常情况下，将这样的事情与组件中的状态进行控制会更加清晰：

isAllowHighlighted: boolean = true;

toggleAllow(allow) {
    this.isAllowHighlighted = allow;
}

在你的模板中：

允许拒绝

<强>更新

我更新了动态生成按钮的答案并将其更改为无线电：

组件（这是触发变更检测的一种方法）：

 log(data) {
    console.log(data);
  }

模板：

<div *ngFor="let btn of [1,2,3]; let i = index">
  <div class="btn" [ngClass]="{'btn-approve-checked' : allow.checked, 'btn-approve-unchecked' : !allow.checked}" > 
    Allow
    <input #allow type="radio" name="someName{{i}}" value="allow" checked (change)="log('allow' + i)">
  </div>
  <div class="btn" [ngClass]="{'btn-approve-checked' : deny.checked, 'btn-approve-unchecked' : !deny.checked}" >
    Deny
    <input #deny type="radio" name="someName{{i}}" value="deny" (change)="log('deny' + i)">
  </div>
</div>

这是一个有效的代码示例：https://stackblitz.com/edit/angular-gmfbrc

Answer 2

鲍里斯的解决方案很不错，但它可以更简单一些。考虑一个按钮可以在＆＃39; on＆＃39;或者＆＃39; off＆＃39;。一个类绑定就足够了，这将允许我们抛弃丑陋的对象绑定。

所以这个

[ngClass]="{'btn-approve-checked' : isAllowHighlighted, 'btn-approve-unchecked' : !isAllowHighlighted}"

成为[class.checked]="allow"

查看我的stackblitz

有关详细信息，请参阅官方文档中的类绑定部分here。

Angular 2 - 将两个按钮的DOM元素传递给它们各自的函数

2 个答案: