初始化前来自 REST 服务的角度荷载布线

Question

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

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

在应用继续使用路由选项之前，如何确保来自 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 });
});
});
}

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

提前谢谢你！

Answer 1

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

引用：

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_INITIALIZER一起使用app.module.ts

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

Answer 2

我找到了一个解决方案，但它更像是一种解决方法。对于我的情况，它可以工作，但如果有人有更干净的解决方案，它将不胜感激。

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

所以解决方法：

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

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

在网站模块中，我将所有调用转发到页面组件

path: '**', component: PageComponent

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

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