projects.component-store.ts
angular/examples/week09-10/state/projects.component-store.ts
// @ts-nocheck
import { Injectable } from '@angular/core';
import { ComponentStore } from '@ngrx/component-store';
import { ProjectsService } from '../ssr/projects.service';
import { Project } from './projects.models';
import { switchMap, tapResponse } from '@ngrx/operators';
interface ProjectsLocalState {
projects: Project[];
loading: boolean;
}
@Injectable()
export class ProjectsComponentStore extends ComponentStore<ProjectsLocalState> {
constructor(private service: ProjectsService) {
super({ projects: [], loading: false });
}
readonly projects$ = this.select((state) => state.projects);
readonly loading$ = this.select((state) => state.loading);
readonly load = this.effect<string>((tenantId$) =>
tenantId$.pipe(
tap(() => this.patchState({ loading: true })),
switchMap((tenantId) =>
this.service.getProjects(tenantId).pipe(
tapResponse(
(projects) => this.patchState({ projects, loading: false }),
() => this.patchState({ loading: false }),
),
),
),
),
);
}
相關文章
server.js
server.js — javascript source code from the angular learning materials (angular/comprehensive-demo/server/server.js).
閱讀文章 →app.component.ts
app.component.ts — typescript source code from the angular learning materials (angular/comprehensive-demo/src/app/app.component.ts).
閱讀文章 →app.config.ts
app.config.ts — typescript source code from the angular learning materials (angular/comprehensive-demo/src/app/app.config.ts).
閱讀文章 →app.routes.ts
app.routes.ts — typescript source code from the angular learning materials (angular/comprehensive-demo/src/app/app.routes.ts).
閱讀文章 →auth.guard.ts
auth.guard.ts — typescript source code from the angular learning materials (angular/comprehensive-demo/src/app/core/guards/auth.guard.ts).
閱讀文章 →role.guard.ts
role.guard.ts — typescript source code from the angular learning materials (angular/comprehensive-demo/src/app/core/guards/role.guard.ts).
閱讀文章 →