从DOM调用服务函数 - Angular 2

Question

有没有办法从DOM中调用服务定义的函数，我可以从DOM中调用组件函数，但是我们如何调用服务函数，就像这样：

@Injectable()
export class UtilsService {
    constructor() {}

    getSessionId() {}
}

<button name="getsession" (click)="UtilsService.getSessionId()">Get Session</button>

- Dheeraj Agrawal

Answer 1

视图绑定中表达式的作用范围仅限于组件类实例。无法直接从视图访问静态变量、全局变量、类型（枚举）等。

如果要在视图中引用它，则必须通过组件类实例访问。

constructor(public utilsService:UtilsService) {}

<button name="getsession" (click)="utilsService.getSessionId()">Get Session</button>

- Günter Zöchbauer

---

直接从HTML调用服务好吗？我们难道不是要通过组件调用服务方法吗？ - Shankar

我认为这个问题不能一概而论。如果你得出结论，决定在项目的编码风格指南中禁止这样做，那么当然不要这样做，否则就由自己决定。我认为最重要的是保持一致性。HTML文件中的代码通常很难发现，所以我会尽量避免这样做，如果必要的话，只在组件代码文件中调用事件处理程序，就像你建议的那样。 - Günter Zöchbauer

Answer 2

作为常规做法，Gunter的答案是完美的。我只想说，在视图中暴露那些必要的函数。不要在视图中暴露服务的所有内容(Demeter法则)。 视图

<button name="getsession" (click)="getSessionId()">Get Session</button>

Component Class

export class MyComponent {
    getSessionId: any;
    constructor(private utilsService:UtilsService) {
       this.getSessionId = utilsService.getSessionId;
    }
}

- Pankaj Parkar

---

getSessionId = utilsService.getSessionId; 不应该放在构造函数里吗？无论如何，我会将其设置为setter。我猜你是指 https://en.wikipedia.org/wiki/Law_of_Demeter。 - Günter Zöchbauer

@GünterZöchbauer 我谈论的是松耦合，但从未听说过 Demeter法则，感谢提供链接和提示，你太棒了 :) - Pankaj Parkar

我在先前的评论中实际上是指 "getter" 而不是 "setter"。但这取决于使用情况（值何时以及频繁地改变）。 - Günter Zöchbauer