代码之家 › 专栏 › 技术社区 › AlexanderJohannesen

带有动态零件的角度布线

angular-router angular

AlexanderJohannesen · 技术社区 · 2 年前

计划是有两个参数化的部分(分别是项目和场景),之后的任何路径都是工具、区域、部分等的选择;

/{projectId}/{sceneId}/functionality

因此,如果你输入的参数太少,我们会为你选择一些方便的默认值,然后我们就出发了。首先,我使用redirectTo尝试了以下操作,但无论我尝试什么,都会出现各种错误,例如;

{ path: '', redirectTo:':projectid/:sceneid', pathMatch: 'full' },
{ path: ':projectid', redirectTo:':projectid/:sceneid', pathMatch: 'full'},
{ path: ':projectId/:sceneId', component: MainComponent, pathMatch: 'full'}

它总是抛出“无法重定向到[:projectId/:sceneId],找不到[:sceneId]”和类似的内容,无论它们的顺序如何,CamelCase,所有的小写字母,等等。也许这里的诀窍在于将每个片段嵌套到子代中,等等,尽管我已经尝试过,但失败了。

我已经尝试了数百种变体,但这是我在当前变体中的路由配置(上下文),我觉得有点粗糙(在多个部分重复该组件);

{ path: '', component: MainComponent, pathMatch: 'full' },
{ path: ':projectId', component: MainComponent, pathMatch: 'full' },
{ path: ':projectId/:sceneId', component: MainComponent, pathMatch: 'full', children:[
  { path: 'test', component: TestComponent, pathMatch: 'full' },
]}

我以为如果我做了“/10/20/测试”,这至少会给我带来一些好处,但它却抛出了一个“未找到”。我似乎无法正确地理解这一点。在绝望中,我将这一行添加到我的第一个代码示例中;

{ path: ':projectId/:sceneId/test', component: TestComponent, pathMatch: 'full' }

但当然,这只是渲染了最终组件,而没有向我们发送 <router-outlet> 包含MainComponent的路径。有什么想法吗?我已经检查了文档,但它们在动态路径上非常稀疏,我的谷歌foo让我失望了。这是前斜杠还是后斜杠的把戏?顺序或者只是错过了要点或概念?

0 回复 | 直到 2 年前

AlexanderJohannesen 2 年前

好吧,所以我想我被困在了一个地方,认为路由更接近地图,而不是它是什么,这是一个节点匹配树。这样,我将每个项目都视为完整路径(因此我使用pathMatch:“full”),而不是让查找器按正确的顺序处理令牌(使用默认的pathMatch:“prefix”)。幸亏 Harun's 评论,我用下面的结构弄清楚了;

{ path: '', component: MainComponent, pathMatch: 'full' },
{ path: ':projectId', component: MainComponent },
{ path: ':projectId/:sceneId', component: MainComponent, children:[
  { path: '', redirectTo:'default', pathMatch: 'full' },
  { path: 'test', component: TestComponent },
  { path: 'default', component: DefaultComponent },
]},

在相同的组件匹配中,仍然有一些像组件重新初始化这样的问题,我仍然想看看我是否可以以某种方式使用带有动态参数的重定向,但这超出了我最初的问题范围。

我也想链接到 this amazing answer 在这个过程中,我发现了路由匹配和路径匹配的来龙去脉:“refix|full”。