Angular 中的路由詳解

更新時間：2023年11月08日 17:13:31 作者：@Autowire

路由是實現(xiàn)單頁面應用的一種方式,通過監(jiān)聽hash或者history的變化,渲染不同的組件,起到局部更新的作用,避免每次URL變化都向服務(wù)器請求數(shù)據(jù),本文給大家介紹Angular 中的路由,感興趣的朋友一起看看吧

1 使用 routerLink 指令路由跳轉(zhuǎn)
2 使用方法跳轉(zhuǎn)路由 - 使用 router.navigate 方法
3 routerLink跳轉(zhuǎn)頁面?zhèn)髦?- GET傳值的方式
4 使用方法跳轉(zhuǎn)頁面?zhèn)髦?- GET傳值的方式
5 動態(tài)路由的方式-路由跳轉(zhuǎn)
6 父子路由

1 使用 routerLink 指令路由跳轉(zhuǎn)

命令創(chuàng)建項目：

ng new ng-demo

創(chuàng)建需要的組件：

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

找到 app-routing.module.ts 配置路由:
引入組件:

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

配置路由:

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

找到 app.component.html 根組件模板，配置 router-outlet 顯示動態(tài)加載的路由:

<h1>
  <a routerLink="/home" routerLinkActive="active">首頁</a>
  <a routerLink="/news" routerLinkActive="active">新聞</a>
</h1>
<router-outlet></router-outlet>

routerLink 跳轉(zhuǎn)頁面默認路由:

//匹配不到路由的時候加載的組件 或者跳轉(zhuǎn)的路由
{path: '**', redirectTo: 'home'}

routerLinkActive: 設(shè)置 routerLink 默認選中路由

<h1>
  <a routerLink="/home" routerLinkActive="active">
    首頁
  </a>
  <a routerLink="/news" routerLinkActive="active">
    新聞
  </a>
</h1>
.active {
  color: green;
}

<h1>
    <a [routerLink]="[ '/home' ]" routerLinkActive="active">首頁</a>
    <a [routerLink]="[ '/news' ]" routerLinkActive="active">新聞</a>
</h1>

2 使用方法跳轉(zhuǎn)路由 - 使用 router.navigate 方法

在組件中注入 Router 服務(wù)，并使用 navigate 方法進行路由跳轉(zhuǎn)：

import { Component } from '@angular/core';
import { Router} from "@angular/router";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'routerProject';
  constructor(public router: Router) {
  }
  goToPage(path: string) {
    this.router.navigate([path]).then(r => {})
  }
}

<h1>
  <button (click)="goToPage('home')">首頁</button>
  <button (click)="goToPage('news')">新聞</button>
</h1>
<router-outlet></router-outlet>

3 routerLink跳轉(zhuǎn)頁面?zhèn)髦?- GET傳值的方式

頁面跳轉(zhuǎn) - queryParams屬性是固定的：

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

獲取參數(shù)方式：

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

4 使用方法跳轉(zhuǎn)頁面?zhèn)髦?- GET傳值的方式

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

5 動態(tài)路由的方式-路由跳轉(zhuǎn)

配置路由文件：

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

頁面設(shè)置參數(shù)：

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

參數(shù)接受：

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

6 父子路由

創(chuàng)建組件引入組件

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

配置路由

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

父組件中定義router-outlet