如何通過路由傳遞動態數據？

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（數據））在產品列表