Angular 5同路由出口内组件间路由跳转配置问询

嘿，我来帮你搞定这个多路由出口的跳转需求！针对你这种已经配置了辅助出口admin的场景，要从NewsComponent跳转到CreatePostComponent，只需要在routerLink中通过对象语法指定目标出口的路径就行，具体写法有两种，看你习惯哪种：

方式一：相对路径跳转（推荐） #

因为你已经在AdminComponent的子路由上下文里了，直接用相对路径更新admin出口的内容就可以：

<!-- 在NewsComponent的模板中 -->
<a [routerLink]="[{ outlets: { admin: ['new-post'] } }]">去创建新文章</a>

这里的逻辑是：outlets对象里的admin对应你定义的路由出口名称，数组['new-post']就是要跳转到的子路由路径，这样就能把当前admin出口里的NewsComponent替换成CreatePostComponent，路由也会从/admin/(admin:news)切换到/admin/(admin:new-post)。

方式二：绝对路径跳转 #

如果你想明确指定完整路由路径，也可以这么写：

<a [routerLink]="['/', 'admin', { outlets: { admin: ['new-post'] } }]">去创建新文章</a>

这种写法会从根路由开始匹配，适合在任何组件中跳转，不用考虑当前路由上下文。

额外补充：组件类中跳转的写法（如果需要） #

要是你需要在NewsComponent的代码里通过逻辑触发跳转，也可以用Router服务的navigate方法，写法和routerLink的数组语法一致：

import { Router } from '@angular/router';

@Component({ /* ... */ })
export class NewsComponent {
  constructor(private router: Router) {}

  navigateToCreatePost() {
    // 相对路径跳转
    this.router.navigate([{ outlets: { admin: ['new-post'] } }]);
    // 或者绝对路径
    // this.router.navigate(['/', 'admin', { outlets: { admin: ['new-post'] } }]);
  }
}

这样写就能完美实现你要的路由切换效果啦！

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