Wie übergibt man dynamische Daten über Routing?

Question

Ich möchte die Filter Property von search-products.component.ts zu ProductsListComponent über Routing senden. Ist es möglich?

Ich kann statische Daten weitergeben, aber was ist mit dynamischen Daten?

Das ist mein Demo-Code ist:

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); 

search-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

könnten Sie versuchen,

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

ändern Routen:

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

und JSON.parse (decodeURI (Daten)) in Produkte-Liste