javascript - 将 Angular Router 渲染 URL 粘贴到浏览器中？

Question

我的路由器配置如下:

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))
        ))
    }
}

Answer 1

如果我在您的 URI 参数上使用 decodeURIComponent('concepts%2Fdemand%2Flead-time-demand') (应该是 :id)，它会解析到概念/需求/交货时间-需求；

现在这让 Angular 路由器感到困惑，它搜索嵌套路由，例如:

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

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

问题作者编辑

我编写了一个合并 Observable 事件的 Action 代码，并且意外地包含了当 Topic 时触发的 Observable > 商店加载完成。

该操作允许用户选择主题片段(概念、公式、指南...)并 用户的选择，它将导航到 ''，因为这是显示切片的路线。

无论如何，由于将与路由匹配的 URL 粘贴到浏览器中会导致应用程序加载，这反过来会导致 this.s.loadingTopicStore$ 事件触发，从而导致路由器导航至 ''。

对于那些感兴趣的人来说，这是 Action 的设计:

  /**
   * 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()
      })
  }

以及由合并触发的函数:

  /**
   * 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