路由 angular 5 ，在 url 之后传递参数上的字符串

Question

我正在开发一个基于地理系统信息的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
}

提前致谢。

Answer 1

此实现的问题在于您实质上是将 应用程序 url 附加到另一个 url。如果您的路由定义为 /home/:url，您可以想象如果您传入一个 geojson URL 并且您的应用程序 url 突然看起来像 [=12]，那么 Angular 路由器会变得多么混乱=] - 路由器无法将 url 映射到任何定义的路线，只会导航到您的 default/wildcard 路线（在您的情况下，/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...
}

Answer 2

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

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

您将被重定向而不会出现任何错误。像这样删除行（出于测试目的），您会收到一条错误消息，告诉您到底出了什么问题。

路由 angular 5 ，在 url 之后传递参数上的字符串

Routing angular 5 , passing a string on params after url

javascript

angular

typescript

angular2-routing