ルーティング経由で動的データを渡すには？

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（データ））製品リストで