Angular 2 Übergabe von Parametern an Konstruktor werfen DI Ausnahme

Question

Ich will eine String-Eigenschaft auf einer Komponente in meinem Konstruktor Setup, aber wenn ich etwas versuchen, wie diese

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

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

    } 
} 

ich ein DI-Exception

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

Offensichtlich versucht der Injektor einen "String" -Provider zu finden und kann keinen finden.

Welche Art von Muster sollte ich für diese Art von Ding verwenden? Z.B. Übergeben von Anfangsparametern an eine Komponente.

Sollte es vermieden werden? Sollte ich die ursprüngliche Zeichenfolge einfügen?

Answer 1

Sie können @Input() Eigenschaften verwenden.

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

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

Constructor sollte in der Regel nur für DI ...

verwendet werden, aber wenn Sie wirklich, wirklich brauchen können Sie injizierbare Variable erstellen (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) // => ! 
    } 
} 

einfachste Möglichkeit ist, einfach eingestellt Klasseneigentum:

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

Wie @Mark wies darauf hin, ein anderes o ption ist eine Dienstleistung in Anspruch:

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