Angular 从应用程序根组件导航到嵌套路由中的辅助路由

Question

参见示例:https://angular-4zfq9r.stackblitz.io/home

代码:https://stackblitz.com/edit/angular-4zfq9r

我有根组件 AppComponent 和 router-outlet。

我有一个 HomeModule

• 主页组件
• 消息组件

HomeComponent 有一个命名的路由器导出“消息”

路由配置:
AppModule : { path:'hello', component:HelloComponent } // not relevant
HomeModule : { path:'home', component:HomeComponent,
children:[ { path:'message', component:MessageComponent, outlet:'message'} ] }


没有指定主路由的路由到消息的链接在 home 组件内工作。


<a [routerLink]="[{outlets:{message:['message']}}]">[message from home]</a>


上面的 routerlink 在应用程序根组件中不起作用。添加主路由时，它可以工作，但我不想指定主路由，因为我想为当时处于事件状态的任何子组件激活消息。消息路由导出必须在 HomeComponent 内部，因为它的内容必须相对于 HomeComponent

在 app root =/home(message:message) 中生成的 url

在 home =/home/(message:message) 中生成的 url

有什么方法可以让它工作吗？

Answer 1

我用它来解决我的类似问题

<a [routerLink]="['', { outlets: { message: ['message'] } }]">Contact</a>