角2参数传递到构造函数抛出异常DI

Question

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

@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) 

很明显，注入器试图找到'字符串'提供程序，并且找不到任何。

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

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

Answer 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指出的，另一个o ption是使用服务：

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