Angular2，注入内容答案

【问题标题】：Angular2, Injecting contantsAngular2，注入内容
【发布时间】：2016-03-23 20:01:17
【问题描述】：

我是这样做的：

import {testInjection} from './ts/models';
import {bootstrap} from 'angular2/platform/browser'; 

bootstrap(AppComponent, [testInjection]).catch(err => console.error(err));

在models.ts中

let TEST:string = "test";

export var testInjection: Array<any>=[
    bind(TEST).toValue(TEST)
];

然后在 AppComponent 中：

class export AppComponent{
constructor(
 public http: Http,
    @Inject(TEST) TEST:string
    ){

  }
}

但收到此错误：错误 TS2304：找不到名称“TEST”。谁能指出我做错了什么。

tnx

【问题讨论】：

标签： angular2-services angular2-di angular2-injection

【解决方案1】：

你做错了，做一个服务

import { Injectable } from '@angular/core';

import { testInjection } from './models';

@Injectable()
export class TestService {
  getTestValue() {
    return testInjection;
  }
}

在你的 AppComponent 中

import {TestService} from './test.service'
class export AppComponent{
constructor(
 public http: Http, _testService : TestService){
     console.log(_testService.getTestValue());
  }
}

在 Angular2 中你只需要使用 @Injecatable ，它应该在服务中使用。在组件中，您只需 DI :) 。希望对你有帮助

【讨论】：

【解决方案2】：

您正在尝试为您的代码使用模态，仅用于类型检查，如果您使用的是您所使用的问题，则不需要使用@inject，

创建单个服务的更好方法，您可以在其中检查类型，调用方法并做任何您想做的事情，现在如果您要创建一个服务而不是提供至少一个装饰器，您可以@Component或者你可以使用@Injectable。像这样——

import { Injectable } from './@angular/core';

@Injectable()
export class TestService {
  name:string =null;
  email:string =null;
 ...///
  constructor(){
   //do your stuff
  }
}

或者你也可以这样使用 -

import { Component } from './@angular/core';

    @Component({
       selector: 'testService'
    })
    export class TestService {
      name:string =null;
      email:string =null;
     ...///
      constructor(){
       //do your stuff
      }
    }

PS: - 必须用至少一个装饰器来装饰类

现在这样做你已经成功创建了一个类，现在如果这个类在多个组件中使用，你可以像这样在引导时注入它 -

bootstrap(AppComponent, [TestService]).catch(err => console.error(err));

现在如果你在引导时注入你的服务，你不需要每次都在提供者列表中提供这个，因为 Angular 会自动为每个组件创建这个服务的实例，

但是，如果您在引导时没有注入您的服务，那么您需要导入您的服务并且还需要注入提供者列表，而不是像这样使用它：-

import { Component } from './@angular/core';
import { TestService } from './TestService';    

    @Component({
       selector: 'testService',
       providers: [TestService]
    })
    export class AppComponent {
      constructor(private service : TestService){
        this.service.blabla   //now you are able to use your service here
      }
    }

希望这篇文章能阐明关于 Angular2 中的注入的一些要点。

【讨论】：