Question

我更新angular和angular-cli后，我一直面临着奇怪的问题。我有两个<div>，我试图隐藏一个，并在点击一个按钮时显示另一个。

这是我的职能：

  ngOnInit() {
    this.goalView = this.el.nativeElement.getElementsByClassName('goal-view')[0];
    this.goalEdit = this.el.nativeElement.getElementsByClassName('goal-edit')[0];
  }

  triggerEdit(): void {
    this.goalView.style.display = 'none';
    this.goalEdit.style.display = 'block';
  }

  triggerView(save: boolean): void {
    this.goalEdit.style.display = 'none';
    this.goalView.style.display = 'block';
  }

我的模板：

<div class="goal-view">
  ...
  <button class="ui right floated green button margin-vertical-10" (click)="triggerEdit()"><i class="ui edit icon"></i>Edit</button>
</div>
<div class="goal-edit">
  ...
  <button class="ui right floated green button margin-vertical-10"><i class="ui save icon" (click)="triggerView(true)"></i>Save</button>
</div>

当我点击edit按钮时，它可以正常工作。当我单击save按钮时，它有时会起作用。但有时它没有，我应该点击30-40次按钮使其工作。我试图在console.log("something")函数中只triggerView，但它也是如此。有时是有效的，有时却没有。

我还检查了event.target事件的click：

document.addEventListener('click', function(evt) {
    console.log(evt.target);
}, false);

看起来很正常。单击时打印正确的<button>。

关于应该是什么问题的任何想法？

Answer 1

通常，您不必在组件内部处理直接元素访问。

相反，您应切换到使用表示元素状态的属性。

试试这个

<div class="goal-view" [hidden]="hideGoalView">
...
</div>

<div class="goal-edit" [hidden]="hideGoalEdit">
...
</div>


ngOnInit() {
   this.hideGoalView = false;
   this.hideGoalEdit = true;
}

triggerEdit(): void {
   this.hideGoalView = true;
   this.hideGoalEdit = false;
}

triggerView(save: boolean): void {
   this.hideGoalView = false;
   this.hideGoalEdit = true;
}

Answer 2

您在图片代码上有第二次点击监听器，而不是按钮标签。

Answer 3

您可以将事件添加到两个不同的元素。

方法 triggerEdit 是按钮标记上的事件，因此您可以点击整个按钮进行调用。

方法 triggerView 是 i 元素上的事件，因此您必须点击按钮上的小区域才能调用它。

我是否建议你认真对待@ devnull69的建议。这将为您节省未来的问题。

Angular - 按钮上未触发Click事件

3 个答案: