Question

我们说我有这样一个组件：

@Component({
  selector: 'app-root',

  template: `
  <button class="btn btn-primary" 
  (click)="buttonClicked()">testbutton</button>`,

  styleUrls: ['./app.component.css']
})

export class AppComponent {
   constructor(private testService : TestService) {
      // some code
    }
    buttonClicked(){
       console.log("clicked");
    }
}

现在，有一个名为TestService的服务。是否可以将另一个事件侦听器（clickEvent侦听器）添加到TestService中的同一按钮？

我正在尝试添加两个事件侦听器，但一个在组件文件中，另一个在服务文件中。

例如，有可能在jquery中完成，如：

$(document).on('click', 'button', function(){
     console.log("button clicked outside of component");
}

Answer 1

更新根据您的用例评论，我认为没有一种很好的方法可以在不修改组件文件的情况下收听每次按键点击。最清晰的设计是从每次点击事件中调用服务的方法。

我所知道的唯一其他 hacky 方式是在您的app组件元素上放置一个click事件，并使用传递的$ event来决定是否记录。

<强> app.component.html

<div class="template page-container" (click)="onClicked($event)">
   <router-outlet></router-outlet>
</div>

<强> app.component.ts

onClicked(e: any) {
  console.log(e);
  let pointerEvent = e as PointerEvent;
  if (pointerEvent) {
    let target = pointerEvent.target as HTMLButtonElement;
    if (target) {
      let isButtonClick = !target.disabled;
      if(isButtonClick) {
         //do something
      }
    }
  }
}

<强>原始我不知道你的用例是什么，但是Angular允许你为一个事件调用两个方法。

编辑：您应该在公共属性中公开私有服务，以便模板可以访问它。

@Component({
  selector: 'app-root',

  template: `
  <button class="btn btn-primary" 
  (click)="buttonClicked(); myTestService.buttonClicked()">testbutton</button>`,

  styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private testService : TestService) {
      // some code
    }

    get myTestService() {
       return this.testService;
    }

    buttonClicked(){
       console.log("clicked");
    }
}

你能说出原因吗？可能有更好的方法来做你需要的。

从angular 4服务调用事件监听器

1 个答案: