angular - Angular 2 中的组件还需要导入共享服务吗？

Question

我有一些设置需要在我的 Angular 2 应用程序中可用。我知道处理此问题的最佳方法是通过服务提供这些值，确保将服务注入(inject)到 bootstrap() 方法中。

所以我的服务(init.service.ts)是这样的:

import {Injectable} from 'angular2/core';

@Injectable()
export class InitService {
    public static startNodeIdContent:number = 1053;
    public static startNodeIdMedia:number = 9999;
}

那么我的引导方法是这样的:

import {bootstrap}          from 'angular2/platform/browser'
import {ROUTER_PROVIDERS}   from 'angular2/router';
import {AppComponent}       from './app.component'
import {RouteNames}         from './services/route-names.service';
import {InitService}        from './services/init.service';

bootstrap(AppComponent, [ROUTER_PROVIDERS,RouteNames,InitService]);

现在，我需要使 startNodeIdContent 值在组件中可用，如下所示:

import { Component }                    from 'angular2/core';
import { HTTP_PROVIDERS }               from 'angular2/http';
import { provide }                      from 'angular2/core';
import { Router }                       from 'angular2/router';
import { XHRBackend }                   from 'angular2/http';

import { RouteNames }                   from '../services/route-names.service';
import { ContentNode }                  from './content-node';
import { ContentService }               from './content.service';
import { ContentTreeComponent }         from './content-tree.component';
import { ContentDashboardComponent }    from './content-dashboard.component';

@Component({
    selector: 'my-dashboard',
    template: `
        <div class="tree-panel-container">
            <div class="tree-panel-content">
                <content-tree [startNodeId]="startNodeIdContent"></content-tree>
            </div>
        </div>
        <content-dashboard></content-dashboard>
    `,
    directives: [ContentTreeComponent, ContentDashboardComponent],
    providers: [
        HTTP_PROVIDERS,
        ContentService
    ]
})

export class ContentComponent {
    constructor(private _routeNames:RouteNames, InitService){
        _routeNames.name.next('Content');
    }
    startNodeIdContent = InitService.startNodeIdContent;
}

但是，我发现在此组件中，InitService 未被识别。我是否仍然必须将 InitService 服务导入到使用它的每个组件中？我的一部分认为将它注入(inject) Bootstrap 方法应该为我做到这一点，但我从文档中不确定这到底应该如何工作。

谢谢。

Answer 1

类型名称只是一个无意义的字符串，除非它直接连接到使用导入声明它的文件。您的应用程序可以包含或导入无限数量的同名类。导入可以清楚地表明类型引用的是哪个类。

导入和提供/注入(inject)大多是不相关的概念。

导入是让当前源文件知道类型，是一个 TypeScript 概念。它对于自动完成、linting 是必要的，...... Angulars DI 使用构造函数参数的类型作为查找提供者的键。如果该类型未通过导入进行规范化，Angulars DI 无法将其用作 key 。

提供是 Angulars DI 的一个概念，定义了提供者的范围。 DI 向上查找注入(inject)器的层次树以查找与键(类型)匹配的提供者，然后从那里返回实例。

您可以使用字符串键或 OpaqueToken 代替类型

bootstrap(AppComponent, provide('InitService', {useClass: InitService});

像这样注入(inject)

constructor(@Inject('InitService') initService) {
  // no auto-completion or type checking because of missing type information
}

但是您会错过类型注释的一些优点。