在 angular 2 中从数据库动态加载路由时出现问题

Question

请帮我解决一个问题。我正在通过 Web 服务从数据库加载路由，并且在使用指向这些路由的链接时一切都按预期工作。但是当我刷新页面或者直接在地址栏中写url时路由不起作用，为什么？

在刷新浏览器时，我遇到 URL 未找到问题

请帮我解决这个问题。

我试图在 index.html 中评论我们的基础 href='/' 以便它不会重定向到 root
我尝试使用 async/await 控制直到 api 响应，以便首先创建 routecollection 然后控制将向前导航

但无法解决此问题。

我已经在 "app.component.ts" 构造函数中添加了我的代码。我调用了一个加载路线的函数

   async getdynamicroutes1(){
  const config = this.router.config;
   await this.rest.fetchinpromise('Religious/GetRoutesCollection').then(data => {
        var indexData = data;
        indexData.forEach(element => {
          let url : string = `${element.EName.toLowerCase()}/:id`;
          config.push({path: url, component: ChaptersComponent, runGuardsAndResolvers:"always"});

          element.ReligiousBooks.forEach(religiousbook => {
            religiousbook.Chapters.forEach(chapter => {
              url = `${element.EName.toLowerCase()}/${this.removeSpace(religiousbook.EName)}/${this.removeSpace(chapter.EName)}/:id`;
              config.push({path:url, component: HomeDetailsComponent, runGuardsAndResolvers:"always"});
            });
          })
      });
      config.push({ path: "app/pagenotfound", component: PagenotfoundComponent })
      config.push({ path: "**", redirectTo: "app/pagenotfound", pathMatch: "full" } )
      this.router.resetConfig(config);
    },
    error => {
      console.log("Error :: " + error);
    });

}

刷新浏览器后，同一页面应该会成功加载。

Answer 1

But when I refresh the page or I write directly the url in the adress bar the route does not work, why?

您的申请中还没有其他路线。在应用程序完全启动之前，您必须尝试在启动时加载它们。

您可以尝试使用 APP_INITIALIZER (https://hackernoon.com/hook-into-angular-initialization-process-add41a6b7e) 否则您将不得不在 angular 脚本加载应用程序之前公开 public 变量，并直接附加所需的实体在路由配置中。

在 angular 2 中从数据库动态加载路由时出现问题

Problem when loading routes from DB dynamically in angular 2

browser-refresh

angular2-routing

dynamic-routing

angular