我有一个这样的 ngrx 效果:
@Effect()
throwError$: Observable<Action> = this.actions$.pipe(
ofType<notificationActions.ErrorThrow>(
notificationActions.ActionTypes.ThrowError
),
tap(() => {
this.store.dispatch(new masterActions.LoadingHide());
this.sub = this.devTools.liftedState.subscribe(data => {
this.errorLogService.addErrorLog(JSON.stringify(data)).subscribe(data2 => console.log('data2', data));
console.log(JSON.stringify(data));
});
}),
map(action => action.payload),
tap(() => {
this.sub.unsubscribe();
}),
mergeMap(error => {
return of(
new notificationActions.ErrorAdd({
type: error.type,
description: error.description
})
);
})
);
Run Code Online (Sandbox Code Playgroud)
errorLogService 的 addErrorLog 方法发送一个 http post 请求,将错误日志存储到数据库中。一切都在执行这样的请求,首先是选项请求,然后是发布请求,但是如果我切换到 switchMap 以组合两个可观察对象,则当我在 chrome 开发工具的网络选项卡上检查它时,选项请求将被取消。
这是重构的代码部分
tap(() => {
this.store.dispatch(new masterActions.LoadingHide());
this.sub = this.devTools.liftedState
.pipe(
switchMap(data => {
console.log('data', data);
return this.errorLogService.addErrorLog(JSON.stringify(data));
}) …Run Code Online (Sandbox Code Playgroud) 我有三条路线,其中一条有警卫保护
app.routing-module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './modules/auth/login/login.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
import { CustomersComponent } from './modules/customers/customers.component';
import { AuthGuard } from './shared/guards/auth.guard';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{ path: 'home', component: DashboardComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: 'customers', component: CustomersComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [AuthGuard] …Run Code Online (Sandbox Code Playgroud)