Angular 中的路由

  1. 命令创建项目:
java 复制代码
ng new ng-demo
  1. 创建需要的组件:
java 复制代码
ng g component components/home
ng g component components/news
ng g component components/produect
  1. 找到 app-routing.module.ts 配置路由:
    引入组件:
java 复制代码
import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';
import { ProductComponent } from './components/product/product.component';

配置路由:

java 复制代码
const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'product', component: ProductComponent},
  {path: '**', redirectTo: 'home'}
];
  1. 找到 app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由:
java 复制代码
<h1>
  <a routerLink="/home" routerLinkActive="active">首页</a>
  <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>
<router-outlet></router-outlet>

routerLink 跳转页面默认路由:

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

routerLinkActive: 设置 routerLink 默认选中路由

java 复制代码
<h1>
  <a routerLink="/home" routerLinkActive="active">
    首页
  </a>
  <a routerLink="/news" routerLinkActive="active">
    新闻
  </a>
</h1>

.active {
  color: green;
}
java 复制代码
<h1>
    <a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
    <a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1>

2 使用方法跳转路由 - 使用 router.navigate 方法

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

java 复制代码
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 => {})
  }
}
java 复制代码
<h1>
  <button (click)="goToPage('home')">首页</button>
  <button (click)="goToPage('news')">新闻</button>
</h1>
<router-outlet></router-outlet>

3 routerLink跳转页面传值 - GET传值的方式

  1. 页面跳转 - queryParams属性是固定的:
java 复制代码
<h1>
  <a routerLink="/home" routerLinkActive="active" [queryParams]="{name: 'index'}">首页</a>
  <a routerLink="/news" routerLinkActive="active" [queryParams]="{name: 'news'}">新闻</a>
</h1>
<router-outlet></router-outlet>
  1. 获取参数方式:
java 复制代码
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传值的方式

java 复制代码
<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 动态路由的方式-路由跳转

  1. 配置路由文件:
java 复制代码
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 {
}
  1. 页面设置参数:
java 复制代码
<h1>
  <a [routerLink]="['/home', '1000']" routerLinkActive="active">首页</a>
</h1>
<router-outlet></router-outlet>
  1. 参数接受:
java 复制代码
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 父子路由

  1. 创建组件引入组件
java 复制代码
import {HomeComponent} from "./components/home/home.component";
import {NewsComponent} from "./components/news/news.component";
  1. 配置路由
java 复制代码
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 {

}
  1. 父组件中定义router-outlet
java 复制代码
<router-outlet></router-outlet>
相关推荐
brief of gali11 分钟前
记录一个奇怪的前端布局现象
前端
前端拾光者1 小时前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网2 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02042 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing2 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge