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>