Question

如何在路由时将特定产品详细信息从商店获取到其他页面？我试图实现这一点，但无法理清如何从其他路线发送商店事件！请参阅以下文件以获取参考。

以下是我的产品商店文件：

import { Action, ActionReducer } from '@ngrx/store';
import {Product} from "../product.model/product.model";
export const productStore: ActionReducer<Product[]> = (status: Product[] = [], action: Action) => {
    switch(action.type){
         case 'SET_LIST' : status = action.payload;
                           return status;
      case 'GET_PRODUCT' : return status;
                 default : return status;
    }
}

以下是产品页面，其中我使用了ngrx / store：

import { OnInit, Component } from '@angular/core';
import {Product} from "../../product.model/product.model";
import {AppService} from "../../app.service/app.service";
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'product-pg',
  template: `
    Product List Goes Here:
    <ul>
      <li *ngFor = 'let product of $productList | async'>
        {{product.name}} - 
        <a [routerLink] = "['/product-details', product.id]">Edit</a>
      </li>
    </ul>
  `
})
export class ProductPageComponent implements OnInit{
   private $productList: Observable<Product[]>;

   constructor(private _service: AppService, private _store: Store<Product[]>){}

   ngOnInit(){
     this.$productList = this._store.select('productList');
     this._service.setProductList()
   }
}

在这里，我希望获得单个产品详细信息 - 产品详细信息页面：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import {Product} from "../../product.model/product.model";
@Component({
  selector: 'product-details-page',
  template: `
    Product Details Page Goes Here...
    {{selectedProduct$ | async}}
  `
})
export class ProductDetailsPageComponent implements OnInit{
   private selectedProduct$:Observable<Product>;

   constructor(private route: ActivatedRoute, private _store :Store<Product>){}

   ngOnInit(){
     this.route.params.subscribe((param) => {
       console.log(param["id"])
       //Can't figure-out how to achieve this OR get store help here???
       this.selectedProduct$ = this._store.dispatch({type: 'GET_PRODUCT', payload: param["id"]});
     })
   }
}

我在路由参数的帮助下无法从商店获取单个产品详细信息。如何实现这一点，请帮帮我？

如何从路由参数

0 个答案: