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

问题描述

我有一个带有用户部分的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（），以接收包含loginLogback变量的选项类。

所以我创建了这个：

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

}

现在，如果我不正确（也许是），我应该在login-page和login-tab上都添加forRoot（），因为用户只需要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模块。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-library