Angular双router-outlet加载同级组件无渲染问题求助

当前两个命名router-outlet无内容渲染的核心原因是路由路径不匹配：

• 父路由的子路由配置为path: ''，但懒加载的子模块（Search/Table）路由要求匹配:pathModel参数路径
• 当访问父组件路径时，子模块的路由无法找到匹配项，因此组件不会渲染

1. 调整路由配置，让路径匹配并传递参数 #

修改parent-routing.module.ts #

将父路由的路径改为带:pathModel参数，同时子路由保持空路径，确保子模块能继承父路由的参数：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DataBrowserComponent } from './data-browser.component';
const routes: Routes = [
  {
    path: ':pathModel', // 新增参数，接收导航栏传递的pathModel
    component: DataBrowserComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('./../table/table.module').then(m => m.TableModule),
        outlet: "table-router"
      },
      {
        path: '',
        loadChildren: () => import('./../search/search.module').then(m => m.SearchModule),
        outlet:"search"
      },
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ParentRoutingModule { }

修改search-routing.module.ts #

将子模块路由改为空路径，继承父路由的pathModel参数：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SearchComponent } from './search.component';
const routes: Routes = [
  { path: '', component: SearchComponent }, // 匹配父路由的空子路径，继承参数
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SearchRoutingModule { }

修改table-routing.module.ts #

同理调整Table模块的路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TableComponent } from './table.component';
const routes: Routes = [
  { path: '', component: TableComponent }, // 匹配父路由的空子路径，继承参数
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TableRoutingModule { }

2. 在组件中获取路由参数 #

在SearchComponent和TableComponent中，通过ActivatedRoute获取并监听pathModel参数：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit, OnDestroy {
  pathModel: string;
  private paramsSubscription: Subscription;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 获取初始参数
    this.pathModel = this.route.snapshot.params['pathModel'];
    // 订阅参数变化，用于search提交后更新组件逻辑
    this.paramsSubscription = this.route.params.subscribe(
      (params: Params) => {
        this.pathModel = params['pathModel'];
        // 执行对应搜索逻辑
      }
    );
  }

  ngOnDestroy(): void {
    this.paramsSubscription.unsubscribe();
  }
}

Table组件可复用上述逻辑，通过订阅参数变化触发数据重新渲染。

3. 实现Search提交更新Table的逻辑 #

在SearchComponent的submit按钮点击事件中，通过Router更新路由参数，触发Table组件的参数订阅更新：

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

// ... 其他代码
constructor(private route: ActivatedRoute, private router: Router) { }

onSubmit(newModel: string): void {
  // 更新父路由的pathModel参数，自动同步到两个命名出口的组件
  this.router.navigate(['../', newModel], { relativeTo: this.route });
}

• 导航栏跳转时，确保路径格式为/your-path-model（例如/user），此时两个命名出口会同时渲染对应组件
• 检查组件中是否正确导入ActivatedRoute和Router服务
• 确认懒加载模块的路径拼写正确，避免导入错误

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