Angular - 按钮上未触发Click事件

Question

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

这是我的功能:

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