Question

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

// 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包。

Answer 1

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

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

由于NavModule听起来像Ui-Library的一部分（其中所有组件仅负责显示事物而不是路由或存储访问等），我建议检查它是否真的需要＆＃34; BaseService＆＃34;如果这是与Ui相关的功能，则仅为Ui-Library提供服务

在Angular 2+包中动态注入/交换服务

1 个答案: