Question

我想将用户活动发送到服务器，尤其是用户单击了哪个按钮。

我想对this post做的事情与我之前问过的相同。帖子是AngularJS，我想问的是Angular（我正在使用Angular8）。

我知道我可以这样做。

HTML：

arr.size * arr.dtype.itemsize

打字稿：

<button (click)="pressA()">A</buttion>
<button (click)="pressB()">B</buttion>

但是这种方式需要我将sendServer插入所有click事件。好烦我可以用这种更有效的方法吗？

Answer 1

您可以将参数传递给函数，从而重新利用代码：

HTML：

<button (click)="press('A')"></button>
<button (click)="press('B')"></button>

打字稿：

@Component({
  templateUrl:"my.html"
})
export class MyApp {

  press(arg: string) {
    sendServer(arg);
  }

}

不知道这是您要找的东西。另外，我建议为您的服务器呼叫创建服务。

Answer 2

对于您的用例，建议您对模板中编写的每个按钮使用一个指令。代码有点像这样

<p>
  <button clickMonitor>1</button>
  <button clickMonitor>2</button>
  <button clickMonitor (clickEmitter) = "data($event)">3</button>
</p>

这是此Angular演示如何实现这一目标

https://stackblitz.com/edit/angular-s5rjtp

现在，这里有多种增强功能，例如您可以在点击次数上添加去抖动效果，以免最终不会多次调用服务器。您可能不想在一些不希望跟踪的按钮上添加此指令。

Answer 3

作为@Reactgular注释，我创建了一个带有button选择器和click hostlistner的指令。

@Directive({
  selector: 'button',
})
export class OnClickDirective {
  @HostListener('click', ['$event']) onClick($event: MouseEvent) {

    const location = $event.view.location ;
    const pathName = decodeURI(location.pathname);
    const innterHtml: string = this.el.nativeElement.innerHTML;

    // send pathName and innterHtml to server.
    //    :

  }

  constructor(private el: ElementRef) { }

}

Angular：将用户活动发送到服务器

3 个答案: