5

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

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

在应用程序继续使用路由选项之前，如何确保来自 REST 服务的路由就位？

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

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

使用此代码，您可以在应用已加载时导航到页面，但是，当您直接请求路由时，它尚未加载。

先感谢您！

4

2 回答 2

5

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

参考：

https://long2know.com/2017/11/angular-dynamic-routes-and-application-initialization/ 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 响应创建路由

这对我有用：

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


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

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 的响应创建路由。

于 2020-05-09T09:34:10.597 回答
0

我找到了解决方案，但它更像是一种解决方法。对于我的情况，它有效，但如果有人有更清洁的解决方案，它将不胜感激。

在 appModule 中，我为所有预定义的路由定义了路由。我有一个网站模块，其中将初始化用户创建的所有页面。

所以解决方法：

在应用程序路由中，我将所有未定义的路由发送到网站模块：

{ path: '**', loadChildren: () => import('./website/website.module').then(module => module.WebsiteModule) }

在网站模块中，我将所有调用转发到 PageComponent

path: '**', component: PageComponent

在页面组件中，我从其余服务请求页面，如果是 404，我将重定向到预定义的 PageNotFound。

正如我所说，它绝对不干净，但它有效。因此，任何让我创建一个完全从休息中定义的 RoutingConfig 的干净解决方案都将不胜感激。

于 2019-12-08T16:14:43.133 回答