Angular component可以直接取用service的function吗

Question

service

clickEvent(item){
     console.log(item)
  }

component.ts

 constructor(private qqs: QqService) {}
 clickEvent(item){
      //  console.log(item)
       this.qqs.clickEvent(item);
       }

compontent.html

<div (click)="clickEvent('some value')">click me</div>

我目前透过service去让component共享一些function

不过每一个component都要 注入服务，然后透过this.xx.function() 才能呼叫service的function

总觉得有点麻烦 因为我component很多个

不知道有没办法 注入服务，让后component可以直接抓service的function去跑就好了

也就是说我component.ts，不需要多写clickEvent()，直接抓取service的clickEvent()去跑

这可行吗?

Answer 1

依赖注入是一定要的。不过如果我没理解错的话，你想要的效果，可以把服务注入为公有来实现，也就是：

constructor(public qqs: QqService) {}

这样可以直接调用到：

<div (click)="qqs.clickEvent('some value')">click me</div>

也就是说，clickEvent确实可以少写一个:)