Question

我在Ionic 2和3中开发了多个应用程序。它们共享相同的登录服务器，并且由于登录代码在所有应用程序中都是相同的，我分成了一个独立的git存储库。在每个应用程序的app /文件夹中都有一个config.ts文件：

export const APPNAME = 'appname';
export const API = 'https://api.appname.com';

我在app.module.ts中包含登录模块作为角度模块：

@NgModule({
  declarations: [
    MainApp
  ],
  imports: [
    ...
    LoginModule.forRoot()
]

login.module.ts是：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthService } from './auth.service';

@NgModule({
    imports: [CommonModule],
    providers: [AuthService]
})
export class LoginModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: LoginModule,
            providers: [AuthService]
        }
    }
}

问题是模块需要APPNAME和API地址才能登录。整个模块独立于主应用程序，我作为位于src / providers / login中的git子模块添加到项目中。但是当在LoginPage或RegisterPage等模块的页面组件中我需要这些常量时，我会这样做：

import { AuthService } from '../auth.service';
import { APPNAME, API } from '../../app/config';

@IonicPage()
@Component({
   selector: 'page-login',
   templateUrl: 'login.html'
})
export class LoginPage {

这是唯一专门引用主应用程序的代码行。我想通过在主应用程序中通过forRoot（）传递配置来反转该引用，但我不知道如何在模块的页面组件内检索它。我应该以某种方式将它们导入AuthService，然后通过页面组件中的服务进行访问吗？我怎样才能做到这一点？

Answer 1

我终于通过服务解决了传递数据的问题。在app.module.ts中添加应用数据：

@NgModule({
  declarations: [
    MainApp
  ],
  imports: [
    ...
    LoginModule.forRoot({APPNAME, API})
]

在模块中，将其传递给服务：

export class LoginModule {
    static forRoot(appData: any): ModuleWithProviders {
        return {
            ngModule: LoginModule,
            providers: [AuthService, { provide: 'appData', useValue: appData }]
        }
    }
}

在服务中，注入它：

@Injectable()
export class AuthService {

  constructor(
    @Inject('appData') public config
  ) {
    console.log(config)
  }
[...]

编辑：此解决方案无法在AOT模式下运行，您需要导出为工厂功能并在服务中创建一个实例

export function AppConfig() {
    return {
        APPNAME: APPNAME,
        API: API
    };
}

constructor(
  @Inject('appData') _appData: any
) {
  this.config = _appData();

Angular模块访问主应用程序数据

1 个答案: