沒有共享組件的提供商

我的應用程序有幾個功能模塊，使用幾個常見的@Component s。因此，我試圖將所有這些共享組件移動到'Widget Module`中，如angular.io FAQ鏈接here所述。沒有共享組件的提供商

然而，當我嘗試這個小部件添加到我的模板之一，我得到：

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() { } 
}

我在做什麼錯？

來源

2016-11-16 John Dibling

你的問題在於對SaveButtonComponent的constructor。對於那些Angular2元素（Component,Directive,Injectable等），構造函數是一個神聖的地方，不應該被純粹的基元所污染。換句話說，Angular2會嘗試使用構造函數中的信息向您的組件注入服務，並且明確name和icon不是服務。

我看你不使用它們的那一刻，你爲什麼不只是擺脫這些原語並留下您的SavebuttonComponent.constructor()空的？你可以隨時在後期設置它們。

來源

2016-11-16 00:18:10

完全是這樣。我把它們改成'@Input（）'，沒有一切都好。感謝您指出明顯。有時顯而易見的是最難看到的。 –

沒有共享組件的提供商

回答

相關問題