angular路由跳转及传值

路由拦截

匹配不到路由的时候加载的组件或跳转的路由

  import {NotFoundComponent} from './not-found.component';
  
  {
    	path: '**', // 任意路由
     	component: NotFoundComponent , // 加载的组件
     	/* redirectTo:'NotFoundComponent' // 跳转的路由 */
   }

路由懒加载

新建一个模块，并新增一个路由配置文件，在路由配置文件中设置该模块子组件的路由拦截

在根路由app-routing.module.ts中加载自定义的模块

     {
        path: 'help-management',
        //路由懒加载，HelpManagementModule：模块类名
        loadChildren: './help-management/help-management.module#HelpManagementModule'
      },

get传值链接跳转

组件1的html进行跳转并传值：

<a [routerLink]="['/路由地址']",[queryParams]="{'键名':'值'}">链接跳转</a>

组件2的ts中接收值：

 import {ActivatedRoute} from '@angular/router'
 
 constructor(public route:ActivatedRoute){}
 ngOnInit(){
    this.route.queryParams.subscribe((data)=>{
      // data:传递的对象
    })
  }

动态路由传值链接跳转

在app-routing.module.ts中设置路由拦截

{path: '路由地址/:aid', component: HomeComponent}

组件1的html中进行跳转并传值：

<a [routerLink]="['/路由地址/','欲传递的id值']">链接跳转</a>

组件2的ts中接收值：

 import {ActivatedRoute} from '@angular/router'
 
 constructor(public route:ActivatedRoute){}
 ngOnInit(){
    this.route.params.subscribe((data)=>{
      // data:传递的对象
    })
  }

get传值js跳转

组件1的html中设置点击事件：

<button (click)="toOtherPage()">js跳转</button>

组件2的ts中接收值：

 import {Router,NavigationExtras} from '@angular/router'
 
 constructor(public router:Router){}
 toOtherPage(){
    let queryParams:NavigationExtras={
        queryParams:{ '键名':'值' }
    }
    //路由跳转
    this.router.navigate(['/路由地址'],queryParams) 
  }

动态路由传值js跳转

在app-routing.module.ts中设置路由拦截

{path: '路由地址/:aid', component: HomeComponent},

组件1的html中设置点击事件：

<button (click)="toOtherPage()">js跳转</button>

组件2的ts中进行跳转并传值：

  import {Router} from '@angular/router'
    
  constructor(public router:Router){}
  toOtherPage(){
    //路由跳转
    this.router.navigate(['/路由地址/','欲传递的id值']) 
  }