Angular 5: NGXS и распознаватели маршрутов - PullRequest
Новая
       7

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

0 голосов
/ 09 ноября 2018

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

Когда я пытаюсь это сделать, приложение просто зависает. Ошибки не отображаются.

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

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

Я думаю, что решение rauwebieten работает только для синхронизации действий. Асинхронное действие изменит хранилище после выполнения selectOnce.

Мне нужно настроить два состояния для работы с асинхронными действиями. Один из них - состояние Тодоса, а другой - состояние запрашивающего Тодо.

Код выглядит так: 

@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;}
            );
    }
}
0 голосов
/ 09 ноября 2018

Игнорируйте, пожалуйста, я сам нашел решение ...

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

@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);
    }
}
...