javascript - 将Angular Router呈现的URL粘贴到浏览器中？

我将路由器配置如下：

const routes: Routes = [
  {
    path: 'topic/:id',
    component: TopicComponent,
    resolve: { topic: TopicResolverService }
  },
  {
    path: '',
    pathMatch: 'full',
    component: SummaryCardListComponent
  }
]

如果我直接访问这样的主题：

http://localhost:4200/topic/concepts%2Fdemand%2Flead-time-demand

它重定向到路径http://localhost:4200/。

我们需要做些什么才能使路由器呈现粘贴到浏览器中的链接？

主题解析器服务如下所示：

@Injectable({
    providedIn: 'root'
})
export class TopicResolverService implements Resolve<Topic> {

    constructor( private s: StateService ) { }

    resolve(
        route: ActivatedRouteSnapshot) {
        const id = route.paramMap.get('id')
        return this.s.loadingTopicStore$.pipe(
            switchMap(()=>of(this.s.topicStore.findOneByID(id))
        ))
    }
}

最佳答案

如果我在您的URI参数上使用decodeURIComponent('concepts%2Fdemand%2Flead-time-demand')（应该是:id），它将解析为concepts/demand/lead-time-demand；

现在，此挡板式角路由器将搜索嵌套路由，例如：

http://localhost:4200/topic/concepts/demand/lead-time-demand

这显然不存在，因此回退到基本URL。

从问题作者编辑

我编写了一个Action来合并Observable事件，并意外地包含了Observable，该Topic在Concepts存储加载完成时触发。

该操作允许用户从主题中选择切片（Formulas，Guides，on ...），并从用户中选择''，因为它是显示切片。

无论如何，由于将URL粘贴到与路由匹配的浏览器中会导致应用程序加载，因此又会引发this.s.loadingTopicStore$事件，并导致路由器导航到''。

对于感兴趣的人，这是动作的设计：

  /**
   * Note that are always only rendering
   * `searchedTopics$` but we also
   * track `selectedTopics$` because
   * we search within this subset when
   * it's selected.
   *
   * This also resets `topicStore.query`.
   */
  onSelectTopicCategory() {
    merge(
      this.s.loadingTopicStore$,
      this.s.activeTopicCategory$).
      pipe(untilDestroyed(this)).subscribe(() => {
        this.s.selectedTopics$ = combineLatest(
          this.s.all$,
          this.s.guides$,
          this.s.blogs$,
          this.s.concepts$,
          this.s.formulas$,
          this.s.tasks$,
          this.s.activeTopicCategory$,
          this.s.loadingTopicStore$,
          this.onSelectTopicCategoryFunction)
        this.s.searchedTopics$ = this.s.selectedTopics$
        this.s.topicStore.query = ''

        //We have to subscribe to this otherwise
        //The combine latest function will never fire.
        //The reason is that we are only using
        //searchedTopics in the view, so we
        //have to fire selectedTopics$ manually.

        this.s.selectedTopics$.
        pipe(untilDestroyed(this)).
        subscribe()
      })
  }

以及由merge触发的功能：

  /**
   * Observe the active topic category.
   *
   * Note that we navigate to '' when a category
   * is selected such that we can see the selections
   * rendered.
   */
  onSelectTopicCategoryFunction(
    all,
    guides,
    blogs,
    concepts,
    formulas,
    tasks,
    active,
    loading) {
    if (loading == false) {
//      this.router.navigate([''])
      switch (active) {
        case TopicCategories.ALL:
          return all
        case TopicCategories.GUIDES:
          return guides
        case TopicCategories.BLOGS:
          return blogs
        case TopicCategories.CONCEPTS:
          return concepts
        case TopicCategories.FORMULAS:
          return formulas
        case TopicCategories.TASKS:
          return tasks
        default:
          return all
      }
    }
    else return []
  }

它是通过@fireflysemantics/slice实现的：

https://www.npmjs.com/package/@fireflysemantics/slice

关于javascript - 将Angular Router呈现的URL粘贴到浏览器中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60944920/