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

Question

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

我正在使用 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 Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'my-path'.

使用跟踪显示如下 - url: "/(view:my-path/(view:my-path/project))" 项目应在何处展开。我如何导航到 /(view:my-path/project) 或 /(view:my-path)/project 之类的 smth？

Answer 1

因此，从 routerLink 指令尝试失败。但是使用 router.navigate 是可行的。

app.routing.ts保持不变。

ExpandedProjectComponent

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

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

Navigate to child router from named outlet

javascript

angular

angular2-routing