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

Question

我想有应用范围的服务。在我的app组件中，我定义了

import {ItemService} from 'services/itemService';
import {ApplicationService} from 'services/applicationService';
@Component({
    selector: 'app',
    viewInjector: [ItemService, ApplicationService]
})
//...

在我的子视图中:

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

Answer 1

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

第一种方法不是在子元素中注入服务，而是通过属性绑定它，这将导致以下子元素:

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() {
    }
}

你可以在你父元素的模板中使用它:

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

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

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

最后，根据您的需要，另一种更简洁的方法是只将您的服务注入到逻辑上应该拥有它的组件中，然后该组件将使用与上面相同的语法将来自该服务的数据绑定到子组件。如果子进程需要触发服务调用，它们可以发出一个父进程可以侦听的事件。

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