[英]How to use the router state in an Angular application with ngrx implementation
我知道可以使用@ ngrx / router-store將狀態存儲在路由中。
該庫將Angular路由器與ngrx-store綁定。
遵循redux原則,存儲路由是有意義的,因為它是應用程序的狀態更改,但是實際上,如何處理存儲的信息? 僅當我們要在路由上實現副作用時,它才有用嗎?
同樣,不會因為ngrx而改變。
import { NewTicketComponent } from './components/ticket/new-ticket/new-ticket/new-ticket.component'; import { RouterModule, Routes } from '@angular/router'; import { NgModule } from '@angular/core'; import { HomeComponent } from './components/home/home.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; import { RegisterComponent } from './components/register/register.component'; import { LoginComponent } from './components/login/login.component'; import { ProfileComponent } from './components/profile/profile.component'; import { PublicProfileComponent } from './components/public-profile/public-profile.component'; // Our Array of Angular 2 Routes const appRoutes: Routes = [ { path: '', component: HomeComponent // Default Route }, { path: 'dashboard', component: DashboardComponent, // Dashboard Route, canActivate: [AuthGuard] // User must be logged in to view this route }, { path: 'register', component: RegisterComponent, // Register Route canActivate: [AuthGuard] // User must be logged in to view this route }, { path: 'login', component: LoginComponent, // Login Route canActivate: [NotAuthGuard] // User must NOT be logged in to view this route }, { path: 'user/:id', component: ProfileComponent, // Profile Route canActivate: [AuthGuard] // User must be logged in to view this route }, { path: 'profile/user/:username', component: PublicProfileComponent, // Public Profile Route canActivate: [AuthGuard] // User must be logged in to view this route }, { path: '**', component: HomeComponent } // "Catch-All" Route ]; @NgModule({ declarations: [], imports: [RouterModule.forRoot(appRoutes)], providers: [], bootstrap: [], exports: [RouterModule] }) export class AppRoutingModule { }
根據我的經驗,這不僅是為了效果。 有時您可能需要傳遞先前狀態的params id。 1.例如,如果您要加載購物車詳細信息(假設是電子商務應用程序)。 當有人點擊url並將其存儲在本地存儲中並將其傳遞給其他狀態url時,您可以獲得params id。
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
const quickCartId = route.firstChild.firstChild.params.id; //get the previous state of params id
if (!this.auth.isAuthenticated()) {
this.auth.handleAuthenticationURLEntry(state);
this.auth.login();
return false;
}
// logic for quick cart feature
if (!!quickCartId) {
localStorage.setItem(environment.cartId, quickCartId); // replace the id
this.cartProvider.load();
}
return true;
}
希望能幫助到你
例如,我在選擇器內使用路由參數
export const selectCurrentCustomer = createSelector(
selectCustomers,
selectRouteParameters,
(customers, route) => customers[route.customerId]
);
另外,如docs中所述,@ ngrx / router-store也調度導航動作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.