Angular 包在组件内部使用自己的服务

Question

我正在为多个应用程序共享的组件创建一个 Angular 库。在库中的组件内使用库内的服务时，我遇到了麻烦。

该服务旨在注入(inject)到应用程序的根目录(而不是库)，并且可以在整个应用程序中使用。

在这种情况下，我们正在查看 ToastService和UIToastComponent 。 UIToastComponent从 UIToastModule 导出.

然后应用程序导入 UIToastModule在应用程序的 AppModule 内，其中还提供了 ToastService .

<ui-toast></ui-toast>标签位于应用程序的 app.component.html文件。

这个想法是，在应用程序内的任何组件中，开发人员都可以注入(inject) ToastService并调用this.toastService.success('Great Success!') ，由 UIToastComponent 拾取并显示 toast 。

constructor对于UIToastComponent似乎无法获取服务，并且在运行时出现以下错误:

Uncaught ReferenceError: ToastService is not defined
at UIToastComponent.ctorParameters (ngx-example-library.js:197)
at ReflectionCapabilities._ownParameters (core.js:2060)
at ReflectionCapabilities.parameters (core.js:2095)
at JitReflector.parameters (platform-browser-dynamic.js:61)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15635)
at CompileMetadataResolver._getTypeMetadata (compiler.js:15527)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata 
(compiler.js:15012)
at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14866)
at eval (compiler.js:34392)
at Array.forEach (<anonymous>)

ToastService 的导入声明里面UIToastComponent看起来像这样:

import { ToastService } from '../../services/toast.service';

该库遵循Angular Package Format v5最初基于 https://github.com/juristr/ngx-tabs-libdemo

这是该库的源代码:ngx-example-library

编辑

我已经实现了forRoot()根据 Günter Zöchbauer 的建议，但不幸的是我仍然得到相同的结果，很可能我错误地实现了它......

这是新创建的 UICoreModule看起来像在图书馆里面:

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UIToastComponent } from './components/toast/toast.component';
import { ToastService } from './services/toast.service';

@NgModule({
    declarations: [
        UIToastComponent,
    ],
    providers: [],
    imports: [
        CommonModule,
    ],
    exports: [
        UIToastComponent,
    ]
})

export class UICoreModule {

    public static forRoot(): ModuleWithProviders {
        return {ngModule: UICoreModule, providers: [ToastService]};
    }

}

这是 AppModule应用程序内部:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';
import {UICoreModule} from 'ngx-example-library';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        UICoreModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

感谢您对此的帮助，这真是令人难以置信。我敢打赌，这真的很容易 - 只要您知道如何做!

编辑 (2)

上面提到的解决方案确实可以在AOT模式下工作，但不能在JIT模式下工作。很高兴现在能接受这一点，无论如何，该应用程序都会构建 AOT。当应用程序增长时，开发可能会发生。

Answer 1

您需要在定义包的模块中实现forRoot，在那里提供服务并使用MyModule.forRoot()<导入AppModule中的模块

另请参阅https://angular.io/guide/ngmodule-faq#what-is-the-forroot-method