使用分析功能的Angular 2/4自定義按鈕組件

我正在製作一個帶有幾個窗體和服務調用的應用程序。我希望能夠跟蹤Adobe分析中的按鈕點擊。我有一個實用方法..讓我們稱之爲「trackClicks（）」。我如何製作自定義按鈕並在整個應用中使用它，以便如果我有一個使用分析功能的Angular 2/4自定義按鈕組件

<button (click)="submitForm()">

它也會執行trackClicks（）。

另外，是否有可能有一個指令，將調用trackClicks（）函數或作出調用它的自定義事件？

來源

2017-09-22 DJ raparla

你最好做一個指令它。

@Directive({ 
    selector: "[adobe-analytics]" 
}) 
export class AdobeAnalytics{ 

    @HostListener("click", ["$event"]) 
    public onClick(event: any): void { 
     //handle your track clicks things here 
    } 
}

，並在您的模板：

<input adobe-analytics type="button" />

來源

2017-09-22 22:16:01 omeralper

喜omeralper ..謝謝..我有一個後續的問題..如果我這樣做，並添加一個功能（點擊）事件..這一個會先執行？有什麼辦法來同步它們嗎？ –

來自rxjs的例子。希望這可以幫助。

// Code goes here 
 

 
window.onload = init; 
 

 
function init() { 
 
    
 
    const trackbtn = document.querySelector('#trackbtn'); 
 
    const counter = document.querySelector('#counter'); 
 
    
 
    const observable =Rx.Observable.fromEvent(trackbtn, 'click'); 
 

 
    const subscriber = observable 
 
    .scan((acc,x) => acc+1,0) 
 
    .subscribe(x => counter.innerHTML = x); 
 
    
 
    
 
    
 
}

<script data-require="[email protected]" data-semver="4.0.6" src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script> 
 
<button id = 'trackbtn'>Click me</button> 
 
<span id = 'counter'>0</span>

來源

2017-09-22 20:59:59

使用分析功能的Angular 2/4自定義按鈕組件

回答

相關問題