Angular中命名路由出口（Named Router Outlets）无法正常工作求助

嘿，我知道你在搞Angular命名路由出口的时候碰到了模板报错的问题，还有要让路由元素同层级用Flex布局的需求，这就给你捋清楚怎么解决！

先说说报错的原因 #

你遇到的那个Parser Error: Missing expected :，说白了就是模板里routerLink的写法不对。Angular解析模板的时候，对属性绑定的语法要求很严，你大概率是多套了一层方括号，或者命名出口的写法没规范好。

直接上正确的代码写法 #

首先得确保你的路由配置已经正确定义了new-user这个命名出口，然后模板里这么写就没问题：

基础的命名路由链接+出口写法 #

<!-- 这是正确的命名路由跳转链接 -->
<a [routerLink]="[{ outlets: { 'new-user': ['new-user'] } }]">
  打开新用户组件
</a>

<!-- 对应的命名路由出口 -->
<router-outlet name="new-user"></router-outlet>

结合Flex布局的完整示例（满足同层级需求） #

要让路由相关元素在同一层级用Flex布局，直接把主出口和命名出口放在同一个Flex容器里就行，像这样：

<div class="flex-wrapper">
  <!-- 普通路由链接 -->
  <a routerLink="/">首页</a>
  <!-- 命名路由链接 -->
  <a [routerLink]="[{ outlets: { 'new-user': ['new-user'] } }]">添加新用户</a>
  
  <!-- 主路由出口 -->
  <router-outlet></router-outlet>
  <!-- 命名路由出口，和主出口同层级，一起参与Flex布局 -->
  <router-outlet name="new-user" class="flex-item"></router-outlet>
</div>

对应的CSS样式：

.flex-wrapper {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  padding: 1rem;
}

.flex-item {
  flex: 1;
  border: 1px solid #eee;
  padding: 1rem;
}

你之前尝试的方案为啥报错？ #

你注释掉的那些代码标红，大概率是踩了这几个坑：

• 多写了一层方括号，比如[[{ outlets: ... }]]，正确的属性绑定只需要一层[routerLink]="[{ outlets: ... }]"
• 命名出口的名字带连字符（new-user），但没加单引号包裹，Angular解析器会把它当成两个变量，自然报错
• 路由数组的格式写错了，比如少了括号或者符号不对

额外提醒两点 #

1. 路由配置里一定要对应好命名出口，比如：

const routes: Routes = [
  { path: '', component: HomeComponent },
  // 这里的outlet要和模板里的name对应上
  { path: 'new-user', component: NewUserComponent, outlet: 'new-user' }
];

2. 如果要关闭命名出口里的组件，用[routerLink]="[{ outlets: { 'new-user': null } }]"就行。

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