Question

我正在尝试在Angular应用程序中归档动态路由。到目前为止，我已经完成了以下功能。

通过用户输入将路由添加到现有角度组件。
从现有的角度应用程序中删除路由。

我已使用router.resetConfig来执行此操作。

我的问题是无论通过输入URL都无法访问我添加的新动态路由。它给了我以下错误。

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'module3'
Error: Cannot match any routes. URL Segment: 'module3'

这是我的代码

app.module.ts

const routes: Routes = [
  {
    path: '',
    component: Module1Component
  },
  {
    path: 'module2',
    component: Module2Component
  }
];

app.component.html

<div>
  <h2><a routerLink="">Module1</a></h2>
  <h2><a routerLink="module2">Module2</a></h2>
  <h2><a routerLink="module3">Module3</a></h2>
  <input type="button" value="add module 3 to route" (click)="addRoute()"/>
  <input type="button" value="remove module 3 from route" (click)="removeRoute()"/>
</div>

<router-outlet></router-outlet>

app.component.ts

addRoute(){
    let r: Route = {
      path: 'module3',
      component: Module3Component
    };
    this.router.resetConfig([r, ...this.router.config]);
    console.log(this.router.config);
  }

我发现在尝试通过在浏览器URL中键入新路由后，新添加的路由对象从路由数组中消失。因此我收到了这个错误。

在我添加动态路线对象

之前的图像

这是在我添加路径对象

之后

但是当我尝试通过访问URL访问/module3路由时，它只是重新初始化路由对象数组，因此它不包含新添加的路由。

我的问题是如何将这个新添加的路由持久保存到初始路由对象数组。因此，当我尝试通过URL访问它时，它就会存在。

我在以下GitHub仓库中为此场景添加了示例角度项目。

https://github.com/mal90/ng-dynamic-route

如果有人能指出我正确的方向，我们非常感谢！

Answer 1

Angular是一个客户端框架，因此当您动态添加新路由时，只有当您不尝试从服务器请求访问页面时，它才有效，这是您在输入URL时的情况。浏览器

Answer 2

正如大卫指出的那样，你的方法对于Angular app来说是精确的爆头。看看你的个人资料，你似乎知道Node.js并且你有相当不错的分数，所以我认为你必须有充分的理由选择这条高度特定的道路。如果你真的想做这么疯狂的事情（我看不出这样做的原因......我认为你应该使用服务器端解决方案）你可能会尝试将路由器定义存储在一些本地存储或外部文件中并强行执行应用程序将任何路径重定向到某个特定路由，然后强制应用程序重新定义路由器，再次初始化它，然后导航到新组件。如您所见，您需要大量的力量才能做到这一点。有些人已有类似的想法。比如在这篇文章中about external definitions不要误解我，我喜欢疯狂的想法。你可能会以某种方式破解环境。但我认为这不值得。

尝试通过网址

2 个答案: