Angular 5：NGXS 和路由解析器

Posted 2023-02-19

【中文标题】Angular 5：NGXS 和路由解析器

【英文标题】：Angular 5: NGXS & route resolvers

【发布时间】：2019-04-12 22:26:26

【问题描述】：

是否可以通过 NGXS 存储用户路由解析器？

我有一个这样的测试，但我不知道这是否是正确的方法：

import ActivatedRouteSnapshot, Resolve from "@angular/router";
import Todo from "./todos.models";
import Observable from "rxjs/Observable";
import Select, Store from "@ngxs/store";
import GetTodo, TodosState from "./todos.state";
import Injectable from "@angular/core";

@Injectable()
export class TodoResolver implements Resolve<Todo> 

    constructor(
        private store:Store
    ) 

    @Select(TodosState.getTodo)
    private todo$:Observable<Todo>;

    resolve(route:ActivatedRouteSnapshot): Observable<Todo>
    
        const id = <number><any> route.paramMap.get('id');
        this.store.dispatch(new GetTodo(id));
        return this.todo$;
    

当我尝试这个时，应用程序只是挂起。没有显示错误。

欢迎大家帮忙。 谢谢

【参考方案1】：

请忽略，我自己找到了解决方案...

将代码更改为：

@Injectable()
export class TodoResolver implements Resolve<Todo> 

    constructor(
        private store:Store
    ) 

    resolve(route:ActivatedRouteSnapshot): Observable<Todo>
    
        const id = <number><any> route.paramMap.get('id');
        this.store.dispatch(new GetTodo(id));

        return this.store.selectOnce(TodosState.getTodo);
    

【参考方案2】：

我认为 rauwebieten 的解决方案仅适用于同步操作。异步操作将在 selectOnce 执行后修改存储。

我必须设置两个状态来处理异步操作。一个是 Todos 状态，另一个是 RequestingTodo 状态。

代码如下：

@Injectable()
export class AsyncTodoResolver implements Resolve<Todo> 
    @Select(RequestingTodoState)
    private todo$:Observable<Todo>;

    constructor(
        private store:Store
    ) 

    resolve(route:ActivatedRouteSnapshot): Observable<Todo> 
        const id = <number><any> route.paramMap.get('id');
        return this.store.dispatch(new GiveOrFetchTodo(id))
           .pipe(
              withLatestFrom(todo$),
              map([any, todo]) => return todo;
            );
    

【讨论】：

当您在给定路线上并刷新页面时，这是否也有效？

我认为无论你如何进入页面，resolver都会解决