时间戳

首页 > 解决方案 > 将 Angular 路由器渲染 URL 粘贴到浏览器中？

javascript - 将 Angular 路由器渲染 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))
        ))
    }
}

标签： javascriptangulartypescriptangular-router

解决方案

如果我decodeURIComponent('concepts%2Fdemand%2Flead-time-demand')在您的 URI 参数上使用，它应该是一个: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

推荐阅读