angular - 具有秋田状态管理的 Angular 解析器

Question

由于缺少文档（守卫、解析器、路由几乎没有记录），我在秋田状态管理和使用 Angular 解析器时遇到了困难，到目前为止我一直在路由中使用这些解析器（当不使用状态管理时）。

我正在查看以下要点，其中作者确实在组件内部进行了订阅，并且我正在尝试将其移至解析器。

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

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'];
  }
}