如何通过路由传递动态数据？

Question

我想通过路由将search-products.component.ts中的过滤条件发送给ProductsListComponent。可能吗？

我能够传递静态数据，但动态数据呢？

这是我的演示代码：

app.routing.ts

import { Routes, RouterModule } from '@angular/router'; 

import { SearchProductsComponent } from './search-products/search-products.component'; 
import { ProductsListComponent } from './products-list/products-list.component'; 

const routes: Routes = [ 
    { path: 'search-products', component: SearchProductsComponent }, 
    { path: 'products-list', component: ProductsListComponent,data:{key:'value'}} 
]; 

export class AppRoutingModule { } 

export const AppRoutingRoutes = RouterModule.forRoot(routes); 

搜索products.component.ts

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

@Component({ 
    selector: 'search-products', 
    templateUrl: 'search-products.component.html', 
}) 

export class SearchProductsComponent implements OnInit { 

    filters = { warehouses: ['A','B'], locations: ['Europe','America']}; 

    constructor(private router : Router) { } 

    ngOnInit() {} 

    goToProductsList() { 
     this.router.navigate(['/products-list']); 
    } 


} 

Answer 1

你可以尝试

this.router.navigate(['/products-list',encodeURI(JSON.stringify(this.filters))]); 

条

改变路线：

const routes: Routes = [ 
    { path: 'search-products', component: SearchProductsComponent }, 
    { path: 'products-list/:data', component: ProductsListComponent} 
]; 

和JSON.parse（decodeURI（数据））在产品列表