Question

我们有一个带有几个孩子的html elelemt。我们在孩子中有一些*ngIf条件，我们需要跟踪外部点击。问题是，当我们单击ngIf中包含的子元素时，该元素为null。该元素可以在浏览器中看到，但不能在DOM中看到。

以下代码返回-1：

this.element.nativeElement.contains(event.target)

nativeElement 是我们的主要元素

event.target 是我们的孩子*ngIf

如何在*ngIf？

中跟踪元素的点击事件

Answer 1

假设您想要跟踪用户按钮的点击次数，您可以这样做：

@Component({
  moduleId: module.id,
  selector: 'sd-test',
  templateUrl: 'test.component.html',
  styleUrls: ['test.component.css']
})
export class TestComponent {
  public userButtonClickedTimes: number;

  constructor() {
       this.userButtonClickedTimes = 0;
  }

  fireClickEvent(source) {
     if (source === 'USER') {
       this.userButtonClickedTimes++;
       console.log('total clicks = ' + this.userButtonClickedTimes);
    }
  }

HTML模板：

<button (click)="fireClickEvent('USER')">User Button</button>

无论是否使用* ngIf表达式进行渲染，只要它在视图中显示，用户就可以点击该按钮，您的应用将跟踪点击次数。

Angular2无法跟踪ngIf的点击

1 个答案: