RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 881323
Accepted
titaniche
titaniche
Asked:2020-09-14 20:35:37 +0000 UTC2020-09-14 20:35:37 +0000 UTC 2020-09-14 20:35:37 +0000 UTC

角 CLI。自定义配置服务

  • 772

再会。

请帮我解决以下问题: 我有一个应用程序配置文件 - app.config.json 它包含一些有用的信息。还有一个尊重此文件结构的界面。此外,还有一项服务可以将文件中的数据加载到静态接口对象中。但是,当应用程序启动时,似乎没有发生下载。

app.config.json

{
  "appUrl": "http://localhost:8080/asterisk-prime",
  "routes": {
    "device": "device",
    "extension": "extension",
    "queue": "queue",
    "queueMember": "queueMember"
  },
  "apiEndpoints": {
    "device": "/api/device",
    "extension": "/api/extension",
    "queue": "/api/queue",
    "queueMember": "/api/queueMember"
  },
  "stompEndpoint": "/socket"
}

iapp.config.ts

export interface IAppConfig {
  appUrl: string;
  routes: {
    device: string,
    extension: string,
    queue: string,
    queueMember: string
  };
  apiEndpoints: {
    device: string,
    extension: string,
    queue: string,
    queueMember: string
  };
  stompEndpoint: string;
}

app.config.service.ts

@Injectable({
  providedIn: 'root'
})
export class AppConfigService {
  static settings: IAppConfig;

  constructor(private httpClient: HttpClient) {
  }

  loadConfig() {
    const configFile = 'src/assets/config/app.config.json';
    return new Promise<void>((resolve, reject) => {
      this.httpClient.get<IAppConfig>(configFile)
        .toPromise()
        .then(response => {
          AppConfigService.settings = response;
          LoggerService.log('Config was loaded');
          resolve();
        })
        .catch(err => {
          LoggerService.error('Error while loading config.', err);
          reject(`Could not load file '${configFile}': ${JSON.stringify(err)}`);
        });
    });
  }
}

app.module.ts

...
export function loadConfig(appConfigService: AppConfigService) {
  return () => appConfigService.loadConfig();
}
...
providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: loadConfig,
      deps: [AppConfigService],
      multi: true
    }
  ],
...

实际上,错误发生在路由初始化期间的路由模块中。

应用程序路由.module.ts

const routes: Routes = [
  {path: '', redirectTo: '/', pathMatch: 'full'},
  {path: '', component: HomePageComponent},
  {path: 'about', component: AboutPageComponent},
  {path: AppConfigService.settings.routes.device, loadChildren: './path/to/children.module#ChildrenModule'},
  {path: AppConfigService.settings.routes.extension, loadChildren: './path/to/children.module#ChildrenModule'},
  {path: AppConfigService.settings.routes.queue, loadChildren: './path/to/children.module#ChildrenModule'},
  {path: AppConfigService.settings.routes.queueMember, loadChildren: './path/to/children.module#ChildrenModule'}

浏览器错误:Cannot read property 'routes' of undefined。

angular
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    titaniche
    2020-09-18T18:14:33Z2020-09-18T18:14:33Z

    目前,我决定将除路由之外的所有内容移至单独的配置文件。留在应用程序内的路由。我使用声明的令牌通过路由实现配置。

    iapp.config.routes.ts

    export interface IAppConfigRoutes {
      routes: any;
    }
    

    app.config.routes.ts

    export let APP_CONFIG_ROUTES = new InjectionToken('app.config.routes');
    
    export const AppConfigRoutes: IAppConfigRoutes = {
      routes: {
        device: 'device',
        extension: 'extension',
        queue: 'queue',
        queueMember: 'queueMember'
      }
    };
    

    app.module.ts

    export function loadConfig(appConfigService: AppConfigService) {
      return () => appConfigService.loadConfig();
    }
    ...
    providers: [
        AppConfigService,
        {
          provide: APP_INITIALIZER,
          useFactory: loadConfig,
          deps: [AppConfigService],
          multi: true
        },
        {
          provide: APP_CONFIG_ROUTES,
          useValue: AppConfigRoutes
        }
      ],
    ...
    

    在组件中使用 AppConfigRoutes(示例):

    header.component.ts

    export class HeaderComponent implements OnInit {
      private readonly appConfig: any;
      readonly angularLogo = require('../../../../assets/images/angular-white-transparent.svg');
      menuItems: any[];
    
      constructor(@Inject(APP_CONFIG_ROUTES) appConfig: IAppConfigRoutes) {
        this.appConfig = appConfig;
      }
    
      ngOnInit() {
        this.loadMenus();
      }
    
      private loadMenus(): void {
        this.menuItems = [
          {name: 'Device', link: '/' + this.appConfig.routes.device},
          {name: 'Extension', link: '/' + this.appConfig.routes.extension},
          {name: 'Queue', link: '/' + this.appConfig.routes.queue},
          {name: 'Queue member', link: '/' + this.appConfig.routes.queueMember}
        ];
      }
    }
    

    用法app-routing.module.ts基本上保持不变,只有对象发生了变化。

    ...
    {path: AppConfigRoutes.routes.device, loadChildren: './path/to/children.module#ChildrenModule'},
    ...
    
    • -1

相关问题

  • Angular CLI 和材料表

  • 角。上下文菜单

  • 导航到另一个页面Angular 6时记住树状态

  • 将数据从组件传递到服务。角 2

  • 角 6 错误 500

  • 为什么@input 不能以角度工作

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    是否可以在 C++ 中继承类 <---> 结构?

    • 2 个回答
  • Marko Smith

    这种神经网络架构适合文本分类吗?

    • 1 个回答
  • Marko Smith

    为什么分配的工作方式不同?

    • 3 个回答
  • Marko Smith

    控制台中的光标坐标

    • 1 个回答
  • Marko Smith

    如何在 C++ 中删除类的实例?

    • 4 个回答
  • Marko Smith

    点是否属于线段的问题

    • 2 个回答
  • Marko Smith

    json结构错误

    • 1 个回答
  • Marko Smith

    ServiceWorker 中的“获取”事件

    • 1 个回答
  • Marko Smith

    c ++控制台应用程序exe文件[重复]

    • 1 个回答
  • Marko Smith

    按多列从sql表中选择

    • 1 个回答
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Suvitruf - Andrei Apanasik 什么是空? 2020-08-21 01:48:09 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5