Angular【router路由】

基本用法

生成路由模块文件

shell 复制代码

ng generate module app-routing --flat --module=app

typescript 复制代码

// app-routing.module.ts`
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { FooComponent } from './foo/foo.component'
import { BarComponent } from './bar/bar.component'

const routes: Routes = [ // 定义路由
  {
    path: 'foo',
    component: FooComponent
  },
  {
    path: 'bar',
    component: BarComponent
  }
]
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

path不能以 / 开头

设置路由出口

html 复制代码

<h1>{{title}}</h1>
<router-outlet></router-outlet>

重定向

复制代码

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

路由跳转

标签跳转

RouterLink 指令是 Angular 声明式导航的方法。它允许你使用标准的锚点元素 (<a>)，这些元素可以与 Angular 的路由系统无缝集成。

html 复制代码

<ul>
  <li>
    <a routerLink="/foo">Go Foo</a>
  </li>
  <li>
    <a routerLink="/bar">Go Foo</a>
  </li>
</ul>

编程跳转

ts 复制代码

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  OnInit(){}
  constructor(private router: Router) { }
  
  goDetail() {
    // 页面跳转
    this.router.navigate(['/detail'])
    // 携带参数
    // this.router.navigate(['/detail',12])
    // this.router.navigate(['/detail'],{queryParams：{id:12}})
  }

}

在组件中解析获取动态路径参数

typescript 复制代码

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private location: Location
  ) { }

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id')
    // 获取queryParams参数
    // const id = this.route.snapshot.queryParams.id
    console.log(id)
  }

}

动态路由匹配

动态路径配置

ts 复制代码

{ path: 'detail/:id', component: HeroDetailComponent }

导航链接

html 复制代码

<a *ngFor="let hero of heroes" class="col-1-4"
    routerLink="/detail/{{hero.id}}">

路由后退

typescript 复制代码

import { Location } from "@angular/common";
@Component(...)
export class UserComponent implements OnInit {
  constructor(private location: Location) {}
  ngOnInit() {}
  onBack(){
		this.location.back();
	}
}