Angular2不能跟蹤ngIf的點擊數

Question

我們有一個html elelemt與小孩。我們在兒童中有*ngIf條件，我們需要跟蹤外部點擊。問題是，當我們點擊包含在ngIf中的子元素時，元素爲空。該元素可以在瀏覽器中看到，但不在DOM中。

下面的代碼retuns -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表達或不被渲染，只要它存在於視圖中，用戶可以點擊按鈕，並且您的應用將跟蹤點擊。