路由角度 5，在 url 之后在参数上传递一个字符串答案

【问题标题】：Routing angular 5 , passing a string on params after url路由角度 5，在 url 之后在参数上传递一个字符串
【发布时间】：2019-06-22 18:21:40
【问题描述】：

我正在开发一个基于地理系统信息的 Angular 项目。这个想法是：我有一个组件，它的路线是：{path: 'home'} 我想通过这条路线传递一个 geojson url，就像这样：{path: 'home/:url'} 在组件的 Onit 函数中，我得到我的 url 并在特定函数中使用它。但是我遇到的问题是，当我输入字符串时，我可以得到它，但是一个长 url 它将我重定向到登录页面。我的代码是：

ngOnInit() {
    this.subscription = this.route.params.subscribe(params => {
        this.load(params['url']);
    });
}

load (url) {
    // code of the function here
}

提前谢谢你。

【问题讨论】：

标签： javascript angular typescript angular2-routing

【解决方案1】：

这个实现的问题是你实际上是在你的 application url 中附加了另一个 url。如果你的路由被定义为/home/:url，你可以想象如果你传入一个geojson URL并且你的应用程序url突然看起来像/home/http://geojson.io/#map=13/40.7159/-74.0084，Angular路由器会变得多么混乱——路由器不能将该url映射到任何定义的路由，并且会只需导航到您的默认/通配符路线（在您的情况下，/login）。

传递长字符串的一个好方法是将 url 设置为 queryParam 而不是路由参数 -- https://alligator.io/angular/query-parameters/。

我建议删除/home/:url 路由并尝试这样的事情：

// in your template
<a [routerLink]="['/home']"
   [queryParams]="{ url: 'http://geojson.io/#map=13/40.7159/-74.0084' }">

// in your component
constructor(
  private route: ActivatedRoute
) {}

ngOnInit() {
  let url = this.route.snapshot.queryParams.url;
  this.load(url);
}

private load(url: string) {
  // do something with the url...
}

【讨论】：

您的回答是合乎逻辑的，但在我的情况下，问题是我从外部项目获取 url，我想将两个项目连接起来：/
不用担心。如果在您的外部项目中提供适当的链接是一件简单的事情，您当然可以这样做。 <a href="http://your-angular-project.com/home?url=<YOUR_URL>"。该链接会将您连接到您的 Angular 应用程序，并且一切正常。如果这不是您所追求的，也许您可以更新您的问题信息，提供更多关于您正在做什么的细节。

【解决方案2】：

要找出问题所在，请将您的route 记录到console 并查看它是否接受您的任何路由。这是一个常见的问题。您的 route 不匹配任何内容，并且您的代码中的某个位置在您的路由模块中有类似这样的内容：

{ path: '**', redirectTo: 'login' }

您将被重定向而不会出现任何错误。删除这样的行（出于测试目的），你会得到一个错误，告诉你，到底哪里错了。

【讨论】：