初始化前来自 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.

我看到了动态添加路由的选项，但是我希望在应用程序的其余部分之前加载路由，这样当用户访问时:'website/generatedPage' 路由在应用完全加载之前就位.

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-initialization/https://medium.com/codegg/pre-loading-user-specific-routes-in-angular-ce829430e1cbhttps://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屋！