Question

我有一些设置需要在我的Angular 2应用程序中提供。我理解处理此问题的最佳方法是通过服务提供这些值，确保将服务注入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服务导入到消耗它的每个组件中？我的一部分认为将它注入Bootstrap方法应该为我做到这一点，但我不确定文档应该如何运作。

感谢。

Answer 1

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

导入和提供/注入主要是不相关的概念。

导入是使当前源文件已知类型，并且是TypeScript概念。它是自动完成，掉毛，......所必需的。 Angulars DI使用构造函数参数的类型作为查找提供者的密钥。如果类型没有通过导入规范化，Angulars DI不能将其用作密钥。

提供Angulars DI的概念并定义提供者的范围。 DI向上查找与密钥（类型）匹配的提供程序的注入器的分层树，然后从那里返回实例。

您可以使用字符串键或bootstrap(AppComponent, provide('InitService', {useClass: InitService});而不是类型

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

像

一样注入它

<?php
    // to connect to database 
    require("user_connection.php");

    $query = "INSERT INTO booked (date, computer_id, name, start_time, end_time) VALUES ('$date', '$select3', '$username', '$select1', '$select2')";

    mysqli_query($query);       
?>

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

是否仍需要将共享服务导入Angular 2中的组件？

1 个答案: