0

我有一个动态注入服务的问题。

// NPM Package 1:
@Injectable() 
export abstract class BaseService { ... }
@Injectable()
export class ServiceA extends BaseService { ... }
@Injectable()
export class ServiceB extends BaseService { ... }

// NPM Package 2:
// nav.module.ts
@NgModule({
    imports: [ ... ],
    declarations: [
        NavComponent
    ],
    exports: [
        NavComponent
    ],
    providers: []
})
export class NavModule { }

// nav.component.ts
@Component({
    selector: 'app-nav',
    ...
})
export class NavComponent {
    constructor(private baseService: BaseService) { ... }
}


// main project
// app.module.ts:
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NavModule
    ],
    providers: [
        {provide: BaseService, useClass: ServiceB }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
@Component({ ... })
export class AppComponent implements OnInit {
    constructor(private baseService: BaseService) { }
    ...
}

// app.component.html
<app-nav></app-nav>

运行项目时，我得到了错误：

Error: No provider for BaseService!

服务没有注入到 NPM 包 2。

如果我在主项目中直接包含npm包2的代码，是没有问题的。BaseService 将作为 ServiceB 注入。

知道可能出了什么问题吗？我使用 ng-packagr ( https://github.com/dherges/ng-packagr ) 来生成 NPM 包。

4

1 回答 1

0

NavModule 由 AppModule 导入，而不是相反。所以你应该要么

  • 改变依赖方向并使 NavModule 导入 Appodule
  • 将 NavComponent 放入 AppModule
  • 让 NavModule 也提供服务
  • 创建一个提供服务的 SharedModule 并让 NavModule 和 AppModule 都从中导入。

由于 NavModule 听起来像是 Ui-Library 的一部分（所有组件只负责显示内容，但不负责路由或存储访问等），我建议检查它是否真的需要“BaseService”以及是否是与 Ui 相关的功能，仅为 Ui-Library 提供服务

于 2017-12-02T06:47:21.487 回答