SoFunction
Updated on 2025-04-12

Detailed explanation of routing in Angular

1 Use routerLink directive to route jump

Command to create a project:

ng new ng-demo

Create required components:

ng g component components/home
ng g component components/news
ng g component components/produect

Found Configure routing:
Introducing components:

import { HomeComponent } from './components/home/';
import { NewsComponent } from './components/news/';
import { ProductComponent } from './components/product/';

Configure routing:

const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'product', component: ProductComponent},
  {path: '**', redirectTo: 'home'}
];

Find the root component template and configure router-outlet to display dynamically loaded routes:

<h1>
  <a routerLink="/home" routerLinkActive="active">front page</a>
  <a routerLink="/news" routerLinkActive="active">news</a>
</h1>
<router-outlet></router-outlet>

routerLink jump page default route:

//Components loaded when the route cannot be matched or routes that jump{path: '**', redirectTo: 'home'}

routerLinkActive: Set routerLink to select routes by default

<h1>
  <a routerLink="/home" routerLinkActive="active">
    front page
  </a>
  <a routerLink="/news" routerLinkActive="active">
    news
  </a>
</h1>
.active {
  color: green;
}
<h1>
    <a [routerLink]="[ '/home' ]" routerLinkActive="active">front page</a>
    <a [routerLink]="[ '/news' ]" routerLinkActive="active">news</a>
</h1>

2. Use method jump route - Use method

Inject the Router service into the component and use the navigate method for routing jumps:

import { Component } from '@angular/core';
import { Router} from "@angular/router";
@Component({
  selector: 'app-root',
  templateUrl: './',
  styleUrls: ['./']
})
export class AppComponent {
  title = 'routerProject';
  constructor(public router: Router) {
  }
  goToPage(path: string) {
    ([path]).then(r => {})
  }
}
<h1>
  <button (click)="goToPage('home')">front page</button>
  <button (click)="goToPage('news')">news</button>
</h1>
<router-outlet></router-outlet>

3 routerLink jump to page to pass value - GET to pass value

Page jump - queryParams attribute is fixed:

<h1>
  <a routerLink="/home" routerLinkActive="active" [queryParams]="{name: 'index'}">front page</a>
  <a routerLink="/news" routerLinkActive="active" [queryParams]="{name: 'news'}">news</a>
</h1>
<router-outlet></router-outlet>

Get parameters:

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
@Component({
  selector: 'app-home',
  templateUrl: './',
  styleUrls: ['./']
})
export class HomeComponent implements OnInit{
  constructor(public activatedRoute: ActivatedRoute) {
  }
  ngOnInit(): void {
    (data => {
      (data)
    })
  }
}

4 How to use the page to pass the value - GET to pass the value

<h1>
    <button (click)="goToPage('home', 'home')">front page</button>
    <button (click)="goToPage('news', 'news')">news</button>
</h1>
<router-outlet></router-outlet>
import { Component } from '@angular/core';
import { Router} from "@angular/router";
@Component({
  selector: 'app-root',
  templateUrl: './',
  styleUrls: ['./']
})
export class AppComponent {
  title = 'routerProject';
  constructor(public router: Router) {
  }
  goToPage(path: string, param: string) {
    ([path], {
      queryParams: {
        name: param
      }
    }).then(r => {})
  }
}

5 Dynamic routing methods - routing jump

Configure routing files:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from "./components/home/";
import {NewsComponent} from "./components/news/";
import {ProductComponent} from "./components/product/";
const routes: Routes = [
  {path: 'home/:id', component: HomeComponent},
];
@NgModule({
  imports: [(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Page settings parameters:

<h1>
  <a [routerLink]="['/home', '1000']" routerLinkActive="active">front page</a>
</h1>
<router-outlet></router-outlet>

Parameters accept:

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
@Component({
  selector: 'app-home',
  templateUrl: './',
  styleUrls: ['./']
})
export class HomeComponent implements OnInit{
  constructor(public activatedRoute: ActivatedRoute) {
  }
  ngOnInit(): void {
    (data => {
      (data)
    })
  }
}

6 Father and Son Routing

Create Components Introduce Components

import {HomeComponent} from "./components/home/";
import {NewsComponent} from "./components/news/";

Configure routing

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from "./components/home/";
import {NewsComponent} from "./components/news/";
const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'news',
        component: NewsComponent
      },
      {path: '**', redirectTo: 'home'}
    ]
  },
  {path: '**', redirectTo: 'home'}
];
@NgModule({
  imports: [(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Define router-outlet in parent component

<router-outlet></router-outlet>

This is the end of this article about routing in Angular. For more related routing content in Angular, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!