如何从reducer（ngrx）获取数据以及如何避免URL中重复的​​路由名称

Question

我正在开发Angular项目。我今天有两个问题。

1. 以下是网址之一 http://localhost:4200/products/products/view/1

如何从中删除“产品”之一？当我尝试删除它时，会将我重定向到“页面未找到”组件。

1. 我试图实现一个reducer功能。我无法以某种方式显示从products.component派遣的reducer数据。

App.route.ts

import { Routes, RouterModule } from '@angular/router';
import { RegisterComponent } from './pages/user/register/register.component';
import { LoginComponent } from './pages/user/login/login.component';
import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'products',
    loadChildren: './pages/products/products.module#ProductsModule'
  },
  {
    path: 'register',
    component: RegisterComponent
  },
  { path: '**', component: PageNotFoundComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}



Product actions:

import { Action } from '@ngrx/store';
import { Product } from '../../../shared/models/products.model';

export const GET_PRODUCT = '[PRODUCT] Get Product';
export const GET_PRODUCTS = '[PRODUCT] Get Products';
export const ADD_CART = '[CART] Add Cart';
export const REMOVE_CART = '[CART] Add Cart';
export const ADD_FAV = '[FAV] Add Fav';
export const REMOVE_FAV = '[FAV] Remove Fav';

// export const getProducts = createAction ('[PRODUCT] Get Products', props<{products: Product[]}>());
// export const getProduct = createAction ('[PRODUCT] Get Product', props<{products: Product}>());

export class GetProducts implements Action {
  public readonly type = GET_PRODUCTS;
  constructor(public payload: Product[]) {}
}

export class GetProduct implements Action {
  public readonly type = GET_PRODUCT;
  constructor(public payload: Product) {}
}

export class AddCart implements Action {
  public readonly type = ADD_CART;
  constructor(public payload: Product) {}
}

export class RemoveCart implements Action {
  public readonly type = REMOVE_FAV;
  // Since we need to remove a particular product we need to pass the index
  constructor(public payload: number) {}
}

export type ProductActions = GetProducts | AddCart | RemoveCart | GetProduct;


product reducer

// Takes the incoming action and decide what to do with it

import * as AllProductActions from '../actios/product-actions';
import { ProductState, InitialProductState } from '../state/product.state';

export function productReducers(
  state = InitialProductState,
  action: AllProductActions.ProductActions
) {
  switch (action.type) {
    case AllProductActions.GET_PRODUCT:
      return { ...state, products: action.payload };
  }
}


App.state

import { Product } from './../../models/products.model';



export interface AppState {
  readonly product: Product[];
}

// export const InitialAppState: AppState = {
//   products: InitialProductState
// };

// export function getInitialState(): AppState {
//   return InitialAppState;
// }


Product State:

import { Product } from '../../../shared/models/products.model';

export interface ProductState {
  products: Product[];
  selectedProduct: Product;
}

export const InitialProductState: ProductState = {
  products: null,
  selectedProduct: null
};

Product Service

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import {shareReplay} from 'rxjs/operators';
import { tap } from 'rxjs/operators';

import { Product } from './../models/products.model';
import { environment } from '../../../environments/environment';
import { ProductActions } from './../store/actios/product-actions';


@Injectable()
export class ProductsService {


    constructor( private httpClient: HttpClient) {

    }
  getProducts(): Observable<any> {
    return this.httpClient.get(`${environment.services["get-products"]}`).pipe(
      shareReplay(1)
    )

  }

}
Products component:

import { Product } from './../../../shared/models/products.model';
import { Observable } from 'rxjs';
import { GetProducts, GetProduct } from './../../../shared/store/actios/product-actions';
import { AppState } from './../../../shared/store/state/app.state';
import { Component, OnInit } from '@angular/core';
import { ProductsService } from './../../../shared/services/products.service';
import { Store, select } from '@ngrx/store';
import { selectProductList } from 'src/app/shared/store/selectors/product.selector';

@Component({
  selector: 'hero-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {

  products: Observable<Product[]>;

  constructor(private svc: ProductsService, private store: Store<AppState>) { }

  ngOnInit() {
    this.svc.getProducts().subscribe(data => {
      this.products = data;
    });
  }

  viewProduct(product: Product) {
    this.store.dispatch(new GetProduct(product));
  }

}


View product:

import { Product } from './../../../shared/models/products.model';
import { GetProduct } from './../../../shared/store/actios/product-actions';
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';

import { AppState } from './../../../shared/store/state/app.state';
import { Observable } from 'rxjs';

@Component({
  selector: 'hero-view-product',
  templateUrl: './view-product.component.html',
  styleUrls: ['./view-product.component.scss']
})
export class ViewProductComponent implements OnInit {

  private subscription: any;
  selectedProduct: Observable<Product[]>;

  constructor(private _store: Store<AppState>) { }

  ngOnInit() {
    this._store.select('product').subscribe(data=> {
      console.log(data) ;
    });
    console.log(this.selectedProduct, 'kk')
    // this.subscription = this._store
    //     .select()
    //     .subscribe(people => {
    //       console.log(people, 'ppppppp');
    //       this.selectedProduct = people;
    //   });
  }



}````