Angular 路由和传值

一、路由和传值

跳转和传值

<ul><li *ngFor="let item of list;let key=index;"><a [routerLink]="['/newscontent']" [queryParams]="{aid:key}">{
   {key}} --- {
   {item}}</a></li>
</ul>

接收

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';@Component({selector: 'app-news-content',templateUrl: './news-content.component.html',styleUrls: ['./news-content.component.scss']
})
export class NewsContentComponent implements OnInit {constructor(public router:ActivatedRoute) { }ngOnInit() {console.log(this.router);// 用rxjs获取值this.router.queryParams.subscribe((data) => {console.log(data);})}}

二、动态路由

可以直接在路由之中配置参数

传参

{path:'newsmsg/:aid/:name',component: NewsMsgListComponent},

<ul><li *ngFor="let item of list;let key=index;"><a [routerLink]="['/newsmsg/',key,'tom'+key]">{
   {key}} --- {
   {item}}</a></li>
</ul>

获取参数

动态路由跳转，用params，否则用queryParams

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'@Component({selector: 'app-news-msg-list',templateUrl: './news-msg-list.component.html',styleUrls: ['./news-msg-list.component.scss']
})
export class NewsMsgListComponent implements OnInit {constructor(public router:ActivatedRoute) { }ngOnInit() {console.log(this.router);// 用rxjs获取值this.router.params.subscribe((data) => {console.log(data);})}
}

三、js调用路由

3.1 传值

先引入ActivatedRoute

import { ActivatedRoute } from '@angular/router'

初始化实例router，并获取传值

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'@Component({selector: 'app-product-content',templateUrl: './product-content.component.html',styleUrls: ['./product-content.component.scss']
})
export class ProductContentComponent implements OnInit {constructor(public router: ActivatedRoute) { }ngOnInit() {// 用rxjs获取值this.router.queryParams.subscribe((data:any) => {console.log("productList" + JSON.stringify(data));})}}

四、父子路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './Component/home/home.component';import { WelcomeComponent } from './Component/home/welcome/welcome.component';import { SettingComponent } from './Component/home/setting/setting.component';import { ProductComponent } from './Component/product/product.component';import { PcateComponent } from './Component/product/pcate/pcate.component';import { PlistComponent } from './Component/product/plist/plist.component';const routes: Routes = [// 首页路由{path: 'home', component: HomeComponent,children: [{path: 'welcome', component: WelcomeComponent},{path: 'setting', component: SettingComponent},{path: '**', component: WelcomeComponent},]},// 产品路由{path: 'product', component: ProductComponent,children: [{path: 'plist', component: PlistComponent},{path: 'pcate', component: PcateComponent},{path: '**', component: PlistComponent},]},{path: '**', redirectTo: 'home'},
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }