Question

我想提供应用程序范围的服务。在我的应用程序组件中，我定义了

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作为组件的成员。

另一种方法是使用单件，即使它不是很干净也可以使用，它可以轻松地用于任何组件。

最后，根据您的需要，另一种更简洁的方法是仅将您的服务注入逻辑上具有该服务的组件中，然后该组件将使用相同的语法将来自服务的数据绑定到子组件我把它放在上面。如果孩子需要触发服务呼叫，他们可以发出父母可以听的事件。

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

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

1 个答案: