带有 Akita 状态管理的 Angular 解析器

Question

由于缺乏文档（守卫，解析器，路由几乎没有记录），我在秋田状态管理和使用 Angular 解析器方面苦苦挣扎，到目前为止我一直在路由中使用它（不使用状态管理时）。

我正在查看以下Gist，其中作者确实在组件内订阅，我正在尝试将其移动到解析器。

我尝试了多种变体，包括在解析器中包含以下几行并进行订阅，但没有任何效果：

this.productsService.get().subscribe();

    this.loading$ = this.productsQuery.selectLoading();

    this.products$ = this.search.valueChanges.pipe(
      startWith(''),
      switchMap(value => this.productsQuery.selectAll({
         filterBy: entity => entity.title.toLowerCase().includes(value)
      }))
    );

Answer 1

您可以在解析器中获取数据并更新存储。

@Injectable()
class ProductsResolver {
  constructor(private productsService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {
    return this.productsService.getProducts().pipe(
      tap(products => {
        this.productsService.set(products);
      })
    )
  }
}


class ProductsService {
  constructor(private store: ProductsStore) {

  }

  set(products) {
    this.store.set(products);
  }
}

在您的路线中：

const routes: Routes = [
  {
    path: 'path',
    component: ProductsComponent,
    // The value that returns from the resolver resolve() method
    // will be assign to the products property on ActivatedRoute
    resolve: { products: ProductsResolver }
  }
];

然后在您的组件中：

class Component {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.products = this.route.snapshot.data['products'];
  }
}