Как перемещаться между компонентами с помощью хранилища маршрутов NGRX и изменять мой URL-адрес на localhost: 4200 /: id - PullRequest
Новая
       41

Как перемещаться между компонентами с помощью хранилища маршрутов NGRX и изменять мой URL-адрес на localhost: 4200 /: id

0 голосов
/ 31 января 2020

Как перемещаться между компонентами с помощью хранилища маршрутов NGRX и изменять мой URL-адрес на localhost:4200/:id

:id => означает: текущий идентификатор

Я хочу изменить свой URL с помощью /id что я получаю от компонента хорошим способом

Мой navbar 

<nav class="background">
    <button routerLink="product/1" routerLinkActive="active">Show</button> |
    <button routerLink="product/add" routerLinkActive="active">Creat an Actions</button>
</nav>

Но этот подход не хорош.

Мой модуль приложения 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';

import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { RouterStateSerializer, StoreRouterConnectingModule, RouterState } from '@ngrx/router-store';
import { reducer, CustomSerializer } from './storeRouter';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { reducers, effects } from './store';

import { AppRoutingModule } from './app-routing.module';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { AddComponent } from './add/add.component';
import { ReadComponent } from './read/read.component';

const root: Routes = [
  {
    path: 'product', children: [
      { path: 'add', component: AddComponent },
      { path: ':pizzaId', component: ReadComponent },
    ]
  },
  { path: '**', redirectTo: 'read', pathMatch: 'full' }
]

@NgModule({
  declarations: [
    AppComponent,
    AddComponent,
    ReadComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,

    StoreRouterConnectingModule.forRoot({
      routerState: RouterState.Minimal,
    }),

    EffectsModule.forRoot(effects),
    RouterModule.forRoot(root),

    StoreModule.forRoot(reducer, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
        strictStateSerializability: true,
        strictActionSerializability: true,
      },
    }),

    StoreModule.forFeature('products', reducers),

    // Only a tool for developers will delete on products
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production,
    }),

  ],
  providers: [{ provide: RouterStateSerializer, useClass: CustomSerializer }],
  bootstrap: [AppComponent]
})
export class AppModule { }

внутри моих селекторов 

export const getSelectedPizza = createSelector(
  getPizzasEntities,
  getRouterState,
  (entities, router): IPizza => {
    return router.state && entities[router.state.params.pizzaId];
  }
)

Я хочу использовать его для моего нового компонента.

Как я могу отправить идентификатор из моего компонента и изменить мои маршруты?

Спасибо: -)

1 Ответ

0 голосов
/ 31 января 2020

Следуйте инструкциям этой статьи, и вы получите то, что хотите https://angular-2-training-book.rangle.io/routing/routeparams

...