从命名插座导航到子路由器答案

【问题标题】：Navigate to child router from named outlet从命名插座导航到子路由器
【发布时间】：2019-11-05 19:26:47
【问题描述】：

我正在尝试在命名插座内呈现的某些组件网格上打开展开的项目。为此，我为我的命名出口路径创建了一个子级。

我正在使用 Angular 7，并且已经尝试过其他帖子中的一些指南。似乎也可以通过指定另一个插座来制作。

路由：

{
  path: 'my-path',
  outlet: 'view',
  component: MyComponent,
  data: {
    animation: 'bottom-left-scale'
  },
  children: [
  {
    path: 'project',
    component: ExpandedProjectComponent
  }]
}

在 html 中：

<app-project [id]="project.id" [thumbnail]="project.thumbnail" [name]="project.name" [routerLink]="[{outlets: { view: 'my-path/project' }}]">
</app-project>

但是当试图导航到它时，得到的错误是

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。 URL 段：“我的路径”。

使用跟踪显示它是这样的 - url: "/(view:my-path/(view:my-path/project))" where project 应该被扩展项。我怎样才能导航到 /(view:my-path/project) 或 /(view:my-path)/project 之类的东西？

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案1】：

所以，从 routerLink 指令尝试它失败了。但是使用router.navigate 可以。

app.routing.ts 保持不变。

ExpandedProjectComponent

openProject(id) {
    this.router.navigate('project', {relativeTo: this.route});
}

【讨论】：