Angular 5: NGXS и преобразователи маршрутов

Можно ли использовать преобразователи маршрутов в хранилище 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$;
    }
}

При такой попытке приложение просто зависает. Ошибок не показано.

Любая помощь приветствуется. Спасибо


angular ngxs
person rauwebieten    schedule 09.11.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Не обращайте внимания, я сам нашел решение ...

Изменен код на:

@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);
    }
}
person rauwebieten    schedule 09.11.2018

arrow_upward
2
arrow_downward

Я думаю, что решение 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;}
            );
    }
}
person Shuai Wang    schedule 08.02.2019
comment
это также работает, когда вы находитесь на заданном маршруте и обновляете страницу? - person O.MeeKoh; 04.01.2020
comment
Я думаю, что резолвер разрешит независимо от того, как вы заходите на страницу - person Shuai Wang; 20.05.2020