How to use same Component for routing in Angular

Question

I am using the same component for my router, on the first click the component affected, but on the next click the component still in the first state.

Here is the script for changing the route

<a [routerLink]="['react/1']">link 1</a>

<a [routerLink]="['react/2']">link 2</a>

Here is my router module

panel-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'
import { PanelCoursesComponent } from 'src/app/components/panel-courses/panel-courses.component';
import { PanelHomeComponent } from 'src/app/components/panel-home/panel-home.component';
import { PanelIntroComponent } from 'src/app/components/panel-intro/panel-intro.component';

const routes: Routes = [
    { path: '', component: PanelHomeComponent },
    { path: 'react', component: PanelIntroComponent },
    { path: 'react/:no', component: PanelCoursesComponent } //the target
]

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class PanelRoutingModule { }

panel-course.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'

@Component({
  selector: 'app-panel-courses',
  templateUrl: './panel-courses.component.html',
  styleUrls: ['./panel-courses.component.scss']
})
export class PanelCoursesComponent implements OnInit {
  url!: any

  constructor(private route: ActivatedRoute, private router: Router) {
    console.log('route')
  }

  ngOnInit(): void {
    this.url = this.router.url
    console.log(this.route.snapshot.params) //the test script
  }

}

On the PanelCourseComponent I try to console log the params, but that's only executed one time on the first click.

Am I missing something?

Shouldn't the syntax be [routerLink]="['react' , '1']" ?

Jeremy Thille
– Jeremy Thille

2021-03-23 15:39:28 +00:00
Commented Mar 23, 2021 at 15:39 — Jeremy Thille
– Jeremy Thille, Commented Mar 23, 2021 at 15:39
I have try this, but it still same

ade ramdani
– ade ramdani

2021-03-23 15:43:01 +00:00
Commented Mar 23, 2021 at 15:43 — ade ramdani
– ade ramdani, Commented Mar 23, 2021 at 15:43

Nightmare Panther · Accepted Answer · 2021-03-23 15:54:40Z

2

You can use this.route.params.subscribe method for this case

Here is the example

ngOnInit(): void {
    this.route.params.subscribe(params => {
      console.log(params) // It will be executed whenever you click the link
    })
  }

answered Mar 23, 2021 at 15:54

Nightmare Panther

362 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrei · Accepted Answer · 2021-03-23 15:54:53Z

0

by default pathMatch is set to 'prefix'. so paths will be matched against your current location and the first one witch "matches" will render its component. to make your paths match only "exact" match add pathMatch: 'full' for your routes

const routes: Routes = [
    { path: '', component: PanelHomeComponent, pathMatch: 'full' },
    { path: 'react', component: PanelIntroComponent, pathMatch: 'full' },
    { path: 'react/:no', component: PanelCoursesComponent } //the target
]

answered Mar 23, 2021 at 15:54

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to use same Component for routing in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related