在 Angular 2 中注入应用程序服务实例

Question

我想要application-wide服务。在我的应用程序组件中，我定义了

import {ItemService} from 'services/itemService';
import {ApplicationService} from 'services/applicationService';

@Component({
    selector: 'app',
    viewInjector: [ItemService, ApplicationService]
})
//...

在我的 child 观点中：

import {ItemService} from 'services/itemService';
import {ApplicationService} from 'services/applicationService';
//...
class MyView {
    constructor(itemService: ItemService, applicationSrevice:ApplicationService) {
    }
}

问题是每个视图都会创建其服务实例。

Answer 1

我不确定这是最简洁的方法，但您有两个选项可以保证您始终拥有相同的服务实例。

第一种方式不是在 child 元素中注入服务，而是简单地通过属性绑定它，这将导致以下 Child :

import {ItemService} from 'services/itemService';
import {ApplicationService} from 'services/applicationService';

@Component({
    selector: 'my-view',
    properties: ['itemService : item-service', 'applicationService : application-service']
})
class MyView {
    private itemService : ItemService;
    private applicationService : ApplicationService
    constructor() {
    }
}

您可以在 parent 的模板中将其与以下内容一起使用：

<my-view [item-service]="itemService" [application-service]="applicationService"></my-view>

也就是说，如果您的应用程序组件的构造函数使用 itemService 和 applicationService 作为组件的成员。

另一种方法是使用单例，尽管它不是很干净，但它可以工作，并且可以很容易地供任何组件使用。

最后，根据您的需要，另一种更简洁的方法是仅将您的服务注入逻辑上应该拥有它的组件，然后该组件会将来自服务的数据绑定到 children 使用与我上面相同的语法。如果 children 需要触发服务调用，他们可以发出 parent 可以收听的事件。

我希望我回答了这个问题，如果没有，请尝试描述一下目标是什么。

在 Angular 2 中注入应用程序服务实例

Inject application services instance in Angular 2

typescript

angular