angular的路由

1.路由引入

import { AppRoutingModule } from './app-routing.module'; 

//app.module引入router的文件

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    DetailComponent,
    DetailQueryComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

// imports注入声明

2. app-routing.module里面进行路由的定义

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeaderComponent } from './components/header/header.component';
import { DetailComponent } from './components/detail/detail.component';
import { DetailQueryComponent } from './components/detail-query/detail-query.component';

// 引入路由模块和相应要定义的组件页面

const routes: Routes = [
  {
    path: 'header',  // 页面的路径
    component: HeaderComponent  // 页面的组件
  },
  {
    path: 'detail/:id',  // 页面的动态参数 id
    component: DetailComponent
  },
  {
    path: 'detailQuery',
    component: DetailQueryComponent
  },
  {
    path: '**', // 默认路由  当路径匹配没有组件时候，到这里，就是输入路由错误
    redirectTo: 'header'  // 重定向到 header
  }
];

// 定义路由的数组 

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

// 装饰器模块定义

export class AppRoutingModule { }

3. 路由的页面的使用，挂载到router-outlet标签这里

4.页面里面的路由跳转，分动态路由param和get(query)路由

<a [routerLink]="[ '/detail/', pm ]">跳转详情</a>

//routerLink变量 动态路由第一个参数是路径path， 第二个参数就是前面定义的id，这里的pm是个变量
 

<a [routerLink]="[ '/detailQuery/' ]" [queryParams]="{id:'qq'}">跳转get详情</a>

// get跳转 routerLink对应的是页面参数， 参数是通过queryParams传值，json形式
// 路由会变成 /detailQuery?id=qq 这种形式

5. 获取传过来的路由参数

import { ActivatedRoute } from '@angular/router';

// 引入当前路由ActivatedRoute



constructor(public router: ActivatedRoute) { }  // 注入声明

this.router.paramMap.subscribe((res) => {

   console.log(res.get('id'), '----id----'); // 通过get方法获取到

});

// 动态路由的获取方式



this.router.queryParamMap.subscribe((res) => {

   console.log(res.get('id'));

});

// get路由的获取值的方式 

6. 动态js进行页面跳转

import { Router, NavigationExtras } from '@angular/router';

// 引入 Router模块  NavigationExtras 用于get跳转传值


jumpRoute() {

  const query: NavigationExtras = {
     queryParams: {
       id: '666'
     }
  }; // get跳转的参数

  this.router.navigate(['/detailQuery/'], query);

}
// get 动态js路由跳转




jumpRouteParams() {

  this.router.navigate(['/detail/', 'id-222']); // 第二个参数就是动态参数

}

// param动态参数的js跳转

7.嵌套路由 children定义  然后在html中加入router-outlet标签，会映射到这里