如何在Angular中通过RouterLink导航到指定Router outlet路由？

问题原因 #

你遇到的是Angular命名路由出口（outlet）的RouterLink参数格式错误问题。你直接把带括号的完整URL字符串传给routerLink是无效的，Angular要求带命名outlet的路由必须用数组格式来定义路由片段，而不是普通的字符串路径。
你直接在地址栏输入URL能正常访问，是因为Angular的全局URL解析器会自动识别括号内的命名outlet配置，但routerLink的字符串参数不会做这个自动解析，必须按规范传递结构化参数。

解决方法 #

模板内直接配置路由 #

将原来的字符串写法改成带方括号绑定的数组格式，主路由路径和命名outlet的配置分开声明：

<a [routerLink]="['/home', '1057', 'view', { outlets: { sidebar: 'view' } }]">sidebar</a>

数组中的项分别对应每一层路由片段，最后通过outlets字段明确指定对应命名出口要加载的路由。

动态参数场景使用 #

如果路由中的ID是组件内的动态变量（比如itemId = 1057），可以直接传入变量：

<a [routerLink]="['/home', itemId, 'view', { outlets: { sidebar: 'view' } }]">sidebar</a>

额外配置：跳转时关闭侧边栏 #

如果需要跳转时同时清空sidebar出口的内容，把对应outlet的值设为null即可：

<a [routerLink]="['/home', itemId, 'view', { outlets: { sidebar: null } }]">关闭侧边栏</a>

内容的提问来源于stack exchange，提问作者ajayramesh