Angular 中的自定义按钮组件 2 / 4 具有分析功能

Question

我正在制作一个包含一些表格和服务电话的应用程序。我希望能够在 Adobe Analytics 中跟踪按钮点击。我有一个实用方法 .. 我们称它为 "trackClicks()"。我如何制作自定义按钮并在整个应用程序中使用它，这样如果我有

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

它还会执行 trackClicks()。

另外，是否可以有一个调用 trackClicks() 函数的指令或创建一个调用它的自定义事件？

Answer 1

来自 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="rxjs@4.0.6" 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>

Answer 2

你最好给它做一个指令。

@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" />

Angular 中的自定义按钮组件 2 / 4 具有分析功能

Custom Button components in Angular 2 / 4 with analytics

angular-components

angular