路由 angular 5 ，在 url 后在 params 上传递一个字符串

Question

I am developping an angular project based on geographic system information. The idea is: I have a component wich its route is : {path: 'home'} I want to pass a geojson url with this route to be like that : {path: 'home/:url'} And in the Onit function of the component i get my url and use it in a specific function. But the problem that i meet is when i put string i can get it but a long url it redirect me to the login page. My code is:

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

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

Thank you in advance.

Answer 1

The issue with this implementation is that you are essentially appending your application url with another url. If your routes are defined as /home/:url , you can imagine how confused Angular Router will get if you pass in a geojson URL and your application url suddenly looks like /home/http://geojson.io/#map=13/40.7159/-74.0084 - Router can't map that url to any defined route and will just navigate to your default/wildcard route (in your case, /login ).

A good way to pass long strings around is to set the url as a queryParam instead of a route param -- https://alligator.io/angular/query-parameters/ .

I suggest removing the /home/:url route and giving something like this a try:

// 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

To find out, where is the problem, log your route to console and see if it accepts any of your routing. It is common a problem. Your route doesn't match any and as you have somewhere in your code something like this in your routing module:

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

you'll get redirected without any errors at all. Remove line like this (for testing purposes) and you'll get an error which tells you, what's exactly wrong.