Angular 没有共享组件的提供程序

我的应用程序有几个功能模块，它们使用一些常见的

@组件。因此，我尝试将所有共享组件移动到一个“`中，如angular.io FAQ链接所述

但是，当我尝试将此小部件添加到我的一个模板时，我得到：

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;
}

组件来自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 { }

save-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>

我做错了什么？
您的问题在于
SaveButtonComponent
的
构造函数。对于那些Angular2元素（
组件
，
指令
，
可注入
，等等），构造函数是一个神圣的地方，不应该被纯粹的原语污染。换句话说，Angular2将尝试使用其构造函数中的信息向组件注入服务，显然
name
和
icon
不是服务

我知道您现在没有使用它们，为什么不去掉这些原语，将您的
SavebuttonComponent.constructor（）
留空呢？您可以在稍后阶段设置它们。
您的问题在于
SaveButtonComponent
的
构造函数。对于那些Angular2元素（
组件
，
指令
，
可注入
，等等），构造函数是一个神圣的地方，不应该被纯粹的原语污染。换句话说，Angular2将尝试使用其构造函数中的信息向组件注入服务，显然
name
和
icon
不是服务

我知道您现在没有使用它们，为什么不去掉这些原语，将您的
SavebuttonComponent.constructor（）
留空呢？您可以在稍后阶段设置它们。
就是这样。我把它们改成了
@Input（）
，没有什么是好的。谢谢你指出显而易见的问题。有时候，显而易见的东西是最难看到的。确实如此。我把它们改成了
@Input（）
，没有什么是好的。谢谢你指出显而易见的问题。有时候，显而易见的东西是最难看到的。
<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>

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