Angular 12中router-outlet跳转时原组件销毁、页面被覆盖的问题求助

问题核心是路由配置未将dialogue设置为original-component的子路由，导致跳转时整个路由被替换，父组件触发ngOnDestroy被销毁。按以下步骤修改即可解决：

1. 修正路由配置 #

打开路由配置文件（通常是app-routing.module.ts），将dialogue路由嵌套为original-component的子路由：

const routes: Routes = [
  // 其他路由配置...
  {
    path: 'original-component',
    component: OriginalComponent, // 你的父组件类
    children: [
      {
        path: 'dialogue',
        component: DialogueComponent // 你的对话框组件类
      }
    ]
  }
];

配置完成后，跳转到original-component/dialogue时，Angular会将对话框组件加载到父组件的<router-outlet>中，不会销毁父组件及原页面内容。

2. 保留现有routerLink与参数传递逻辑 #

你当前的routerLink写法是正确的相对路由，无需修改：

<a [routerLink]="['./dialogue']" [queryParams]="{username: username}">123456789</a>
<router-outlet></router-outlet>

跳转后父组件的订阅逻辑会继续生效，username参数也会被正确传递。

3. 子组件获取查询参数（可选） #

如果对话框组件需要使用username参数，可在子组件中通过ActivatedRoute订阅：

constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe(data => {
    const username = data.username;
    // 此处编写参数处理逻辑
  });
}

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