javascript - Angular4 - routerLink with typescript - Stack Overflow

admin管理员组

文章数量:1173665

I have worked with routerLink and it works very well :

      <a routerLink="inscription" class="btn btn-default">Inscription</a>
      <a routerLink="login" class="btn btn-default">Se connecter</a>

I am trying now to deal with routerLink inside the typescript file. Exactly, when i click on a button, i call a function inside this function i want to call routerLink how could i do it? and if is calling it will reload the page or it will work exactly the same as the routerLink above ?

I have worked with routerLink and it works very well :

      <a routerLink="inscription" class="btn btn-default">Inscription</a>
      <a routerLink="login" class="btn btn-default">Se connecter</a>

I am trying now to deal with routerLink inside the typescript file. Exactly, when i click on a button, i call a function inside this function i want to call routerLink how could i do it? and if is calling it will reload the page or it will work exactly the same as the routerLink above ?

• javascript
• angular
• typescript

Share Improve this question Follow edited Aug 27, 2017 at 20:38 ussefshahid asked Aug 11, 2017 at 0:10 ussefshahidussefshahid 15811 gold badge22 silver badges1212 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 42

In code, you use .navigate instead:

this.router.navigate(['/products']);

You pass it the same parameter as you do the routerLink.

try this

<a javascript:void(0) routerLink="inscription" class="btn btn-default">Inscription</a>

Please note that though the URL in the browser is not case sensitive, Router.navigate is.

Correct: this.router.navigate(['/products']);.

Incorrect: this.router.navigate(['/Products']);

From what I have learned, routerLink is simply a wrapper for the Router method navigateByUrl(...). I was using routerLink so that I can update a secondary outlet. This worked for me:

this.router.navigateByUrl(this.router.createUrlTree(["/<parent>", {outlets: {'<outlet_name>': ['<outlet_path>']}}]))

To describe in words, router.navigateByUrl seems to prevent the page reload, but it only accepts a pure url, no params (to my understanding). I use router.createUrlTree(...) to generate a "pure" url from the additional outlet/query/etc params I need the url to have. Maybe it would read better like this:

generatedUrl = this.router.createUrlTree(["/<parent>",  {outlets: {'<outlet_name>': ['<outlet_path>']}}])

router.navigateByUrl(generatedUrl)

本文标签： javascriptAngular4routerLink with typescriptStack Overflow