Question

我正在制作一个包含几种表格和服务电话的应用。我希望能够跟踪Adobe分析中的按钮点击次数。我有一种实用方法..让我们称之为＆＃34; trackClicks（）＆＃34;。我如何制作一个自定义按钮并在整个应用程序中使用它，如果我有一个

<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中的自定义按钮组件，带有分析功能

2 个答案: