Angular 2将参数传递给构造函数引发DI异常答案

【问题标题】：Angular 2 passing parameters to constructor throws DI exceptionAngular 2将参数传递给构造函数引发DI异常
【发布时间】：2016-06-01 18:48:47
【问题描述】：

我想在我的构造函数中的组件上设置一个字符串属性，但是当我尝试这样的事情时

@Component({
    selector: 'wg-app',
    templateUrl: 'templates/html/wg-app.html'
})
export class AppComponent {

    constructor(private state:string = 'joining'){

    }
}

我得到一个 DI 异常

    EXCEPTION: No provider for String! (AppComponent -> String)

显然，注入器正在尝试查找“字符串”提供程序，但找不到任何提供程序。

我应该为这种类型的事情使用什么样的模式？例如。将初始参数传递给组件。

应该避免吗？我应该注入初始字符串吗？

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

您可以使用@Input() 属性。

<my-component [state]="'joining'"></my-component>

export class AppComponent {
  @Input() state: string;
  constructor() { 
    console.log(this.state) // => undefined
  }
  ngOnInit() {
    console.log(this.state) // => 'joining'
  }
}

构造函数通常应该只用于 DI...

但如果你真的，真的需要它，你可以创建可注入变量(plunker)：

let REALLY_IMPORTANT_STRING = new OpaqueToken('REALLY_IMPORTANT_STRING');
bootstrap(AppComponent, [provide(REALLY_IMPORTANT_STRING, { useValue: '!' })])

export class AppComponent {
  constructor(@Inject(REALLY_IMPORTANT_STRING) public state: REALLY_IMPORTANT_STRING) { 
    console.log(this.state) // => !
  }
}

最简单的选择是设置类属性：

export class AppComponent {
  private state:string = 'joining';
  constructor() { 
    console.log(this.state) // => joining
  }
}

正如@Mark 指出的那样，另一种选择是使用服务：

export class AppService {
  public state:string = 'joining';
}
export class AppComponent {
  constructor(private service: AppService) { 
    console.log(this.service.state) // => joining
  }
}

【讨论】：

是的，看来你不应该像对待普通类一样对待组件
嗯，这不是一个普通的课程（：这是一个可以做一些普通事情的特殊课程：P
嘿，是的，我觉得像传递字符串这样直接的事情应该是可能的。我不需要在我的模板中初始化它
是的，我更多地考虑可测试性。能够以其他一些初始状态通过。感谢您的回答，非常全面
我认为 REALY_IMPORTANT_STRING 示例不会像所示那样工作。您需要创建一个 OpaqueToken，或者使用字符串标记，然后将其 @Inject 到构造函数中。见DI dev guide。