Javascript 将角度路由器渲染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

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

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

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

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

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

我们需要做什么才能使路由器渲染粘贴到浏览器中的链接

主题解析程序服务如下所示：

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

@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%2FDead time demand'，该参数应为：id，它将解析为concepts/demand/lead time demand

现在这阻碍了angular router，它搜索嵌套路由，如：

http://localhost:4200/topic/concepts/demand/lead-时间需求

这显然是不存在的，因此它返回到基本URL

从问题作者处编辑 我编写了一个合并可观察事件的操作，并意外地包含了主题存储加载完成时触发的可观察事件

该操作允许用户选择一部分主题概念、公式、指南。。。在用户的选择上，它将导航到，因为这是显示切片的路径

无论如何，由于将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()
      })
  }

以及由合并触发的功能：

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

---

你能展示一下你的TopicResolver服务吗？这很奇怪，因为它应该可以工作。Angular的路由器应能正确处理此问题。我添加了TopicResolveService代码。@谢谢。你在TopicComponent中有什么相关的东西可能会引起问题吗？@KurtHamilton-再次感谢你的指导。它帮助我找出了根本原因。我编辑了答案并更新了详细信息。我根据降价文档所在的路径构建了id，因此它是概念/需求/交付周期需求。IIUC问题是hte/字符。Angular不喜欢这样，因为它将它们解释为嵌套路径，并且它没有用于这些嵌套路径的路由？所以换句话说，我不应该在id中包含/字符？绝对正确，而且我认为，如果必须让它们找到一种对它们进行双重编码的方法，这是不对的。只要有URL编码的值，就可以将其用作路由参数值@对。允许在参数中使用斜杠，这不是问题所在。