Angular 中的路由详解

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

路由是实现单页面应用的一种方式,通过监听hash或者history的变化,渲染不同的组件,起到局部更新的作用,避免每次URL变化都向服务器请求数据,本文给大家介绍Angular 中的路由,感兴趣的朋友一起看看吧

1 使用 routerLink 指令路由跳转

命令创建项目：

ng new ng-demo

创建需要的组件：

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 显示动态加载的路由:

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

routerLink 跳转页面默认路由:

//匹配不到路由的时候加载的组件 或者跳转的路由
{path: '**', redirectTo: 'home'}

routerLinkActive: 设置 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 使用方法跳转路由 - 使用 router.navigate 方法

在组件中注入 Router 服务，并使用 navigate 方法进行路由跳转：

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跳转页面传值 - GET传值的方式

页面跳转 - 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>

获取参数方式：

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 使用方法跳转页面传值 - 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 动态路由的方式-路由跳转

配置路由文件：

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 {
}

页面设置参数：

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

参数接受：

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 父子路由

创建组件引入组件

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

<router-outlet></router-outlet>

到此这篇关于Angular 中的路由的文章就介绍到这了,更多相关Angular 中的路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

总结AngularJS开发者最常犯的十个错误
AngularJS是如今最受欢迎的JS框架之一，简化开发过程是它的目标之一，这使得它非常适合于元型较小的apps的开发，但也扩展到具有全部特征的客户端应用的开发。下面给大家总结了AngularJS开发者最常犯的十个错误，有需要的可以参考学习下。
2016-08-08
Angular应用懒加载模块配置管理详解
这篇文章主要为大家介绍了Angular应用懒加载模块配置管理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
AngularJS基础 ng-if 指令用法
本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下
2016-08-08
浅谈angular4生命周期钩子
本篇文章主要介绍了浅谈angularr4生命周期钩子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
AngularJs E2E Testing 详解
本文主要介绍AngularJs E2E Testing的资料，这里整理了详细的资料，及简单代码示例，有兴趣的小伙伴可以参考下
2016-09-09
Angular实现点击按钮后在上方显示输入内容的方法
这篇文章主要介绍了Angular实现点击按钮后在上方显示输入内容的方法,涉及AngularJS事件响应及页面元素属性动态设置相关操作技巧,需要的朋友可以参考下
2017-12-12
Angular框架详解之视图抽象定义
这篇文章主要给大家介绍了关于Angular框架详解之视图抽象定义的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
解决ng-repeat产生的ng-model中取不到值的问题
今天小编就为大家分享一篇解决ng-repeat产生的ng-model中取不到值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
Angular实现点击按钮控制隐藏和显示功能示例
这篇文章主要介绍了Angular实现点击按钮控制隐藏和显示功能,结合实例形式分析了AngularJS简单控制页面元素显示与隐藏的相关操作技巧,需要的朋友可以参考下
2017-12-12
AngularJs Understanding the Model Component
本文主要介绍AngularJs Understanding the Model Component的内容，这里整理了相关资料，并详细讲解了这部分知识，有兴趣的小伙伴可以参考下
2016-09-09