Angular 8 Router Link not working in a specific part of the code

Question

Inside my code, I used routerLink to redirect the user if he's not authenticated and works perfectly, but in the same page I have couple links that redirect to the suggested post but on click, only the link in the browser changes and the clicked post does not load, here is my current version of the code:

Note: RouterModule already Import in app.module.ts

import { RouterModule } from '@angular/router';
@NgModule({
    declarations: [
      ...
      FaqComponent,

    ],
    imports: [
      RouterModule,
      BrowserModule,
      ...
    ],
    providers: [],
    bootstrap: []
  })
  export class AppModule { }

Not working:

<h1>Suggested FAQ</h1>
<ul class="list-group list-group-flush">
     <li style="padding: 12px 0px;background-color: transparent;font-weight: bold;" *ngFor="let faq of suggestedFaqs" class="list-group-item">
        <a routerLink="/faq/{{faq.id}}/{{faq.title}}" >{{faq.title}}</a>
     </li>
</ul>

Works:

<div style="margin: 30px 0px;" *ngIf="!isLoggedIn">
   <a routerLink="/login" class="btn_faq" >login</a>
</div>

Path definition in app-routing.module.ts

  { path: 'faq/:id/:title', component: FaqComponent},

Example:

http://localhost:4200/faq/2/Changer%20votre%20langue%20préférée.

The route works perfectly when it's clicked outside the FaqComponent but if it's Clicked inside the FaqComponent it doesnt work

@StepUp no errors shown, it just doesn't load the new post details, but the link in the browsers changes — S4L4H, Jun 16 '20 at 12:27
Is the '/faq' route defined with the parameter you're passing in the app.routing.ts file? It should appear as something like { path: 'faq/:title', component: FaqComponent} — rolivencia, Jun 16 '20 at 12:28
yes its already defined and the same routerLink : [routerLink]="['/faq', faq.id,faq.title]" redirect to the post in the page that contains all posts — S4L4H, Jun 16 '20 at 12:31
How does your route look like? `.../faq/1/footitle` Could you show your path? — StepUp, Jun 16 '20 at 12:33
I think the problem is that I want to load "Post component" when I am already in the "post component", if that makes any sense — S4L4H, Jun 16 '20 at 12:34
Please share your app.module so we can actually see your router definitions... — rcanpahali, Jun 16 '20 at 12:36

score 0 · Accepted Answer · answered Jun 16 '20 at 12:50

0

The router only destroys and recreates the component when it navigates to a different route. When only route params or query params are updated but the route is the same, the component won't be destroyed and recreated.

Answer here

answered Jun 16 '20 at 12:50

S4L4H

402
1
5
21

Angular 8 Router Link not working in a specific part of the code

1 Answers1