Góc thông số 2 đi qua để constructor ném DI ngoại lệ

Question

tôi muốn thiết lập một tài sản chuỗi trên một thành phần trong constructor của tôi, nhưng khi tôi thử một cái gì đó như thế này

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

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

    } 
} 

tôi nhận được một ngoại lệ DI

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

Rõ ràng, vòi phun đang cố gắng tìm một nhà cung cấp 'chuỗi' và không thể tìm thấy bất kỳ nhà cung cấp nào.

Tôi nên sử dụng loại mẫu nào cho loại điều này? Ví dụ. chuyển các tham số ban đầu cho một thành phần.

Có nên tránh không? Tôi có nên tiêm chuỗi đầu tiên không?

Answer 1

Bạn có thể sử dụng @Input() thuộc tính.

<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 thường nên được sử dụng chỉ cho DI ...

Nhưng nếu bạn thực sự, thực sự cần nó, bạn có thể tạo tiêm biến (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) // => ! 
    } 
} 

lựa chọn đơn giản nhất là chỉ cần thiết thuộc tính lớp học:

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

Khi @Mark chỉ ra, một ption là sử dụng dịch vụ:

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