如何在不同的angular库之间正确地共享数据？

Question

我有一个带有用户部分的angular 10应用程序，我将其分离到不同的库中，以便使其通用并发布到github上。

用户库包含以下模块：login-page、login-tab、profile-page、register-tab和shared。

登录选项卡模块需要获取登录命令的一些订阅参数。

所以我定义了这个：

export type LoginCallback = (username: string, password: string) => Subscribable<LoginDataToken>;

现在，由于我分离了login-page和login-tab，因此需要为它们创建一个不同的forRoot()，以便接收包含loginCallback变量的options类。

所以我创建了这个：

import {LoginCallback} from '@com-tuxin/user/src/lib/shared';

export class LoginTabOptions {

  constructor(public loginCallback: LoginCallback) {
  }

}

@Injectable()
export class LoginTabService {

  public loginCallback: LoginCallback|undefined;

  setLoginCallback(login: ((username: string, password: string) => Subscribable<LoginDataToken>) | undefined): void {
    this.loginCallback = login;
  }

}

现在，如果我错了(也许我错了)，我应该将forRoot()添加到login-page和login-tab中，因为用户只需要login-page，而我需要将回调传递给login-tab。

这是我的完整login-page.module.ts

import {ModuleWithProviders, NgModule} from '@angular/core';
import {LoginPageComponent} from '@com-tuxin/user/src/lib/login-page/login-page.component';
import {FlexModule} from '@angular/flex-layout';
import {MatTabsModule} from '@angular/material/tabs';
import {RegisterTabModule} from '@com-tuxin/user/src/lib/register-tab';
import {LoginTabModule, LoginTabOptions, LoginTabService} from '@com-tuxin/user/src/lib/login-tab';
import {RouterModule, Routes} from '@angular/router';

const routes: Routes = [  {path: 'login', component: LoginPageComponent} ];


@NgModule({
  declarations: [
    LoginPageComponent
  ],
  imports: [
    RegisterTabModule,      ### LINE BLOW IS PROBLEMATIC ###
 ###-->      LoginTabModule.forRoot({loginCallback: this.loginTabService.loginCallback}),
 ################   
 FlexModule,
    MatTabsModule,
    RouterModule.forChild(routes)

  ],
  exports: [
    LoginPageComponent
  ]
})
export class LoginPageModule {

  constructor(private loginTabService: LoginTabService) {
  }

  // tslint:disable-next-line:no-any
  static forRoot(options: LoginTabOptions): ModuleWithProviders<any> {
    return {
      ngModule: LoginPageModule,
      providers: [ {
        provide: LoginTabService,
        useFactory: () => {

          const loginTabService = new LoginTabService();
          loginTabService.setLoginCallback(options.loginCallback);
          return( loginTabService );

        }
      } ]
    };
  }

intellij返回Object is possibly undefined的错误。我猜想在那个部分this中它不是实际类的this。

所以首先..我的方法有意义吗？用户将加载login-page并向其添加一个forRoot()，我的login-age模块将加载login-tab并通过forRoot()向其提供回调，它将使用该回调。

如果不是..。有什么不同之处？

如果是的话..我怎么纠正它呢？该模块需要通过forRoot()获取服务，并通过forRoot()将其发送到login-tab模块。

Answer 1

您可以尝试以下方法:将LoginTabModule添加到imports数组中，并在forRoot部分中传播LoginTabModule providers：

@NgModule({
  imports: [
    LoginTabModule,  <============== tell Angular that you're going
                                     to use declarables from this module
    ...

  ],
  ...
})
export class LoginPageModule {
  static forRoot(options: LoginTabOptions): ModuleWithProviders<any> {
    return {
      ngModule: LoginPageModule,
      providers: [
        {
          provide: LoginTabService,
          useFactory: () => {
            ...
          }
        },
        ...LoginTabModule.forRoot(options).providers, <== use providers from LoginTabModule
      ]
    };
  }
}