Angular单组件多路由优化：解决重复渲染与页面闪烁问题

核心问题原因 #

当前路由配置中，''和:id是两个独立的路由条目，Angular会为每个路由创建全新的组件实例。切换路由时旧组件会被销毁、新组件会被初始化，导致ngOnDestroy和ngOnInit各触发一次，出现页面闪烁。

解决方案步骤 #

1. 合并路由配置，实现组件复用 #

将两个路由合并为一个，使用可选参数:id?，让/child和/child/:id匹配同一个路由，Angular会复用组件实例，避免销毁重建。

修改ChildRoutingModule：

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule, Routes} from "@angular/router";
import {ChildComponent} from "./child.component";

const routes: Routes = [
  {
    path: ':id?', // 问号标记id为可选参数
    component: ChildComponent
  }
]

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

2. 订阅路由参数变化，替代一次性快照获取 #

组件复用后ngOnInit只会触发一次，因此需要订阅ActivatedRoute的参数变化，动态更新表单状态，同时要在组件销毁时取消订阅避免内存泄漏。

修改ChildComponent逻辑：

import {Component, OnDestroy, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {ActivatedRoute, Router} from "@angular/router";
import {STATE} from "../state";
import {Subscription} from "rxjs";

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrl: './child.component.css'
})
export class ChildComponent implements OnInit, OnDestroy {
  readonly STATE = STATE;
  formGroup: FormGroup = this.formBuilder.group({
    name: ['', Validators.required],
    description: ['', Validators.required]
  });
  private paramSubscription!: Subscription;

  constructor(
    private formBuilder: FormBuilder,
    private activatedRoute: ActivatedRoute,
    private router: Router) {
  }

  ngOnInit() {
    console.log('ngOnInit');
    // 订阅路由参数变化，动态更新表单
    this.paramSubscription = this.activatedRoute.paramMap.subscribe(params => {
      const id = params.get('id');
      if (id) {
        const item = STATE.find(el => el.id === id);
        if (item) {
          this.formGroup.patchValue(item);
        } else {
          // 无效id：重置表单并导航回无id路由（组件不重建）
          this.formGroup.reset();
          this.router.navigate(['./'], {relativeTo: this.activatedRoute});
        }
      } else {
        // 无id时重置表单
        this.formGroup.reset();
      }
    });
  }

  ngOnDestroy() {
    console.log('ngOnDestroy');
    // 取消订阅，避免内存泄漏
    this.paramSubscription.unsubscribe();
  }

  onSubmit() {
    const id = this.activatedRoute.snapshot.paramMap.get('id');
    if (id) {
      const itemIndex = STATE.findIndex(el => el.id === id);
      // 修复原逻辑错误：findIndex找不到元素返回-1，需判断不等于-1
      if (itemIndex !== -1) {
        STATE[itemIndex].name = this.formGroup.value.name;
        STATE[itemIndex].description = this.formGroup.value.description;
      }
    } else {
      const random = Math.floor(Math.random() * 1000000);
      const newId = random.toString();
      STATE.push({
        id: newId,
        name: this.formGroup.value.name,
        description: this.formGroup.value.description
      });

      // 导航到带id路由，组件复用无重建
      this.router.navigate(['./', newId], {relativeTo: this.activatedRoute});
    }
  }
}

3. 修复原有逻辑细节错误 #

• 原代码中if (itemIndex)判断逻辑错误：findIndex找不到元素时返回-1，布尔判断中-1为true，需改为if (itemIndex !== -1)。
• 编辑已有条目时无需重新赋值id，因为路由参数中的id不会变化。

效果验证 #

• 保存新条目时，路由切换不会触发组件销毁重建，无页面闪烁，仅参数订阅回调更新状态。
• 切换到无效id路由时，组件不会重复渲染，仅重置表单并导航回无id路由。
• 点击已有条目链接时，组件复用，表单自动填充对应数据，无闪烁。

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