共有コンポーネントのプロバイダがありません

Question

私のアプリケーションにはいくつかの共通の@Componentを使用するいくつかの機能モジュールがあります。だから私は、hereにリンクされているangular.io FAQで説明されているように、これらの共有コンポーネントをすべて 'Widget Module'に移動しようとしました。私は私のテンプレートのいずれかにこのウィジェットを追加しようとすると、しかし、私は取得しています

：私は機能モジュール内で、共有コンポーネントを使用しようとするところ

Error in package:./src/app/tracker/clients/client-detail.component.ts 
class ClientDetailComponent - inline template:28:8 caused by: 
No provider for String! 

ここでは、次のとおりです。

@Component({ 
    moduleId: module.id, 
    selector: 'client-detail', 
    template: ` 
<save-button id="save-button" (click)="saveClient()" [isSaving]="isSaving" [disableSave]="disableSave"></save-button> 
` 
}) 
export class ClientDetailComponent implements OnInit { 
    isSaving: boolean = false; 
    disableSave: boolean = false; 

    constructor() { } 

    ngOnInit() {} 

    saveClient() { 
    this.isSaving = true; 
    // do some work... 
    this.isSaving = false; 
} 

ここ

は、機能モジュールのモジュールです：

import {SharedWidgetModule} from "../shared/shared-widget.module"; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    TrackerRoutingModule, 
    SharedWidgetModule 
    ], declarations: [ 
    TrackerComponent, 
    TrackerHomeComponent, 

    // Clients 
    ClientsComponent, 
    ClientsHomeComponent, 
    ClientShieldComponent, 
    ClientDetailComponent, 

    // EndClients 
    EndClientListComponent 
    ], providers: [ 
    BackendService, 
    ClientsService 
    ] 
}) 
export class TrackerModule { } 

<save-button>コンポーネントが来ますSharedWidgetModuleから：

import {NgModule} from "@angular/core"; 
import {SaveButtonComponent} from "./save-button/save-button.component"; 
import {CommonModule} from "@angular/common"; 

@NgModule({ 
    imports: [CommonModule], 
    exports: [SaveButtonComponent, CommonModule], 
    declarations: [SaveButtonComponent], 
    providers: [], 
}) 
export class SharedWidgetModule { } 

セーブ・button.component.html：

<button type="submit" class="btn btn-primary" [disabled]="disableSave || isSaving"> 
    <i *ngIf="isSaving" class="fa fa-refresh fa-spin"></i> 
    <i *ngIf="!isSaving" class="fa {{icon}}"></i> 
    {{name}} 
</button> 

セーブ・button.component.ts：

import {Component, OnInit, Input} from "@angular/core"; 

@Component({ 
    moduleId: module.id, 
    selector: 'save-button', 
    templateUrl: 'save-button.component.html', 
    styleUrls: ['./save-button.component.scss'] 
}) 
export class SaveButtonComponent implements OnInit { 
    name: string; 
    icon: string; 
    @Input() isSaving: boolean; 
    @Input() disableSave: boolean; 

    constructor(name: string, icon: string) { 
     this.name = name || 'Save'; 
     this.icon = icon || 'fa-floppy-o'; 
    } 

    ngOnInit() { } 
} 

私が間違っているのか？

Answer 1

constructorの問題はSaveButtonComponentです。それらのAngular2要素（Component、Directive、Injectableなど）の場合、コンストラクタは単純なプリミティブによって汚染されるべきではない聖地です。別の言い方をすれば、Angular2はそのコンストラクタの情報を使ってコンポーネントにサービスを注入しようとします。そして明らかにnameとiconはサービスではありません。

あなたは現時点でそれらを使用していないことを知っていますが、それらのプリミティブを取り除いて、あなたのSavebuttonComponent.constructor()を空のままにしてみませんか？後の段階でいつでもそれらを設定することができます。