Angular 中的路由

路由"/>

Angular 中的路由

1 使用 routerLink 指令 路由跳转

1. 命令创建项目：

ng new ng-demo

2. 创建需要的组件：

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

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

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

配置路由:

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

4. 找到 appponent.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: './appponent.html',styleUrls: ['./appponent.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传值的方式

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

2. 获取参数方式：

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";@Component({selector: 'app-home',templateUrl: './homeponent.html',styleUrls: ['./homeponent.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: './appponent.html',styleUrls: ['./appponent.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. 配置路由文件：

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

2. 页面设置参数：

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

3. 参数接受：

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

6 父子路由

1. 创建组件引入组件

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

2. 配置路由

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';import {HomeComponent} from "./components/home/homeponent";
import {NewsComponent} from "./components/news/newsponent";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 {}

3. 父组件中定义router-outlet

<router-outlet></router-outlet>