小编Mar*_*epo的帖子

我一直在查看ngrx 示例应用程序并尝试使用以下内容扩展它：

• 搜索书籍时，查询会作为查询参数写入 url 中，如下所示http://localhost:4200/book/find?query=book_title
• 当打开包含查询参数的 url 的页面时，应填充搜索输入框并显示搜索

做这样的事情的正确方法是什么？

我已经添加了我的解决方案，它可以完成工作，但我不确定它是否有任何好处。在其中，我将查询参数存储在两个看起来像反模式的地方

我的解决方案：

在 app/books/effects/books.ts 中的搜索效果中添加了路由器导航，以便每当触发搜索时，url 都会使用查询字符串进行更新

search$: Observable<Action> = this.actions$.pipe(
  ofType<Search>(BookActionTypes.Search),
  debounceTime(this.debounce || 300, this.scheduler || async),
  map(action => action.payload),
  switchMap(query => {
    if (query === '') {
      return empty();
    }

    const nextSearch$ = this.actions$.pipe(
      ofType(BookActionTypes.Search),
      skip(1)
    );

    return this.googleBooks.searchBooks(query).pipe(
      takeUntil(nextSearch$),
      map((books: Book[]) => {
// added //
        this.router.navigate([], {
          queryParams: { query: query },
          queryParamsHandling: 'merge',
        });
///////////
        return new SearchComplete(books);
      }),
      catchError(err => of(new SearchError(err)))
    ); …

我开始使用角度,我只是无法绕过路由器,这是我的问题....

让我们假设我有一个像这样的应用程序结构......

现在在功能'C'组件html如下...

<feature-d-component></feature-d-component>
<feature-e-component></feature-e-component>

每个都有一个路由器插座,即功能'D'组件和功能'E'组件具有如下相同的HTML

<router-outlet></router-outlet>

这可以实施吗？如果可以,你能给出一个路由配置示例,还有一个例子,如何通过routerLink路由到这个？