初始化之前从REST服务进行角度负载路由 [英] Angular load routing from REST service before initialization

问题描述

我正在研究Angular 8从REST服务动态创建路由的可能性。
这个想法是，用户可以创建应该可以通过在网页上进行路由访问的页面。

I am looking into the possibility for Angular 8 to dynamically create the routing from a REST service. This idea is that a user can create pages which should be available for access by routing on the web page.

我看到了动态添加路由的选项，但是，我希望在应用程序的其余部分之前先加载路由，以便当用户访问网站/本地页面时，路由已在应用程序完全加载之前就位。

I have seen options to dynamically add routes, however I would like to have the routes loaded before the rest of the app, so that when a user would access: 'website/generatedPage' the routing is in place before the app is fully loaded.

在应用继续使用路由选项之前，如何确保REST服务的路由到位？

How do I make sure the routes from the REST service are in place before the app continues with the routing options?

以下代码将路由添加到了后面：

The following piece of code adds the routing to late:

    constructor(
    private sitemapService: SitemapService,
    private router: Router
) {
    this.sitemapService.getSiteMap().then(result => {
        result.forEach(sitemapItem => {
            this.router.config.push({ path: sitemapItem.pageName, component: PageComponent });
        });
    });
}

使用此代码，您可以在应用加载了区域代码后导航到该页面，但是，当您直接请求该路线时，尚未加载该路线。

With this code you can navigate to the page when the app is aready loaded, however, when you would directly request the route, it is not loaded yet.

预先感谢您！

推荐答案

好，所以我遇到了完全相同的问题，当我偶然发现这三篇文章并结合使用它们时，我实际上将使用您的解决方案解决方案。

Ok, so I had this exact same issue and I was actually going to use your "solution" when I stumbled up on these three articles and used a combination of them to come up with the solution.

参考文献：

https://long2know.com/2017/11/angular-dynamic-routes-and-application-初始化/
https： //medium.com/codegg/pre-loading-user-specific-routes-in-angular-ce829430e1cb
https://www.tektutorialshub.com/angular/angular-how-to-use -app-initializer /＃where-to-use-app-initializer

我的用例：我需要创建路由根据GET响应

My use case: I need to create routes based on a GET response

这对我有用：

1。首先，我创建了一个新的 app-init 服务：

1. First, I created a new app-init service:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AppInitService {

  constructor(private Router: Router) {}

  init() {
    return new Promise<void>((resolve, reject) => {

        // Simple example from an array. In reality, I used the response of
        // a GET. Important thing is that the app will wait for this promise to resolve
        const newDynamicRoutes = ['bulbasaur','charmander','squirtle']
        const routes = this.Router.config;

        newDynamicRoutes.forEach(routeName => {
          routes.push({ path: routeName, component: <YourComponent> });
        });

        this.Router.resetConfig(routes);
        resolve();
    });
  }
}

2。然后，在 app.module.ts 和 APP_INITIALIZER

2. Then, I use it in app.module.ts with APP_INITIALIZER

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppInitService } from './services/app-init/app-init.service'; // New service that I created

...

export function initializeApp(appInitService: AppInitService) {
  return (): Promise<any> => { 
    return appInitService.init();
  }
}

...

  providers: [
    AppInitService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      multi: true,
      deps: [AppInitService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

这就像一个吊饰。它使我可以根据API的响应来创建路由。

This works like a charm. It lets me create routes based on the response from an API.

这篇关于初始化之前从REST服务进行角度负载路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！