Angular Router 重复渲染路由组件问题排查求助

问题根因与修复方案 #

1. 最高概率触发原因：a标签重复触发跳转 #

你在item.component.html的路由跳转链接同时配置了href="#"和[routerLink]属性：

<a href="#" [routerLink="[...]"]>
  <button>查看详情</button>
</a>

点击时会先后触发两次导航：

• 原生href="#"先触发锚点跳转，路由会先导航到带#后缀的异常路径
• Angular的routerLink绑定事件随后触发一次正常路由导航
  两次连续导航直接导致Info组件被重复初始化、渲染。

修复方法

直接删除href="#"属性即可，routerLink本身已内置跳转逻辑，不需要额外原生href属性支持：

<a [routerLink]="[
  '/item',
  p.id,
  p.name,
  p.date,
  p.desc,
  p.price,
  p.image
]">
  <button class="btn btn-success mt-1">
    <i class="fas fa-question"></i>
  </button>
</a>

如果需要保留a标签的原生样式，可以替换为href="javascript:void(0)"，或者给a标签添加(click)="$event.preventDefault()"阻止默认跳转行为。 #

2. 路由配置错误 #

如果删除href属性后问题仍然存在，需要检查路由配置文件：

• 是否存在多个路由规则都能匹配当前跳转的Info路径，导致多个路由出口同时渲染Info组件
• 父路由item是否未配置pathMatch: 'full'，导致子路由切换时父路由Item组件被重复销毁重建，连带内部router-outlet重新渲染子组件
  参考正确的父子路由配置：

const routes: Routes = [
  {
    path: 'item',
    component: ItemComponent,
    children: [
      // 参数顺序需和routerLink传递顺序完全对应
      { path: ':id/:name/:date/:desc/:price/:image', component: InfoComponent }
    ]
  }
];

配套优化建议 #

1. Info组件路由参数取值优化
   你当前使用snapshot取路由参数，仅能拿到组件初始化时的参数值，若后续在同路由下切换参数不会触发视图更新。推荐改为订阅params流，同路由参数变化时不需要重建组件即可更新数据，同时记得在组件销毁时取消订阅避免内存泄漏：

export class InfoComponent implements OnInit, OnDestroy {
  p: Post;
  paramsSubscription: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.paramsSubscription = this.route.params.subscribe(params => {
      this.p = {
        id: params['id'],
        name: params['name'],
        price: params['price'],
        place: params['place'],
        image: params['image'],
        date: params['date'],
        desc: params['desc'],
      };
    });
  }

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

2. 不推荐将全量商品字段放在路由参数中，参数长度有限制且可读性差，建议仅传递商品id，在Info组件中根据id请求对应商品数据，或通过Angular Router的state属性传递非持久化的复杂数据。
3. Item组件中的HTTP请求订阅需要在组件销毁时取消，避免内存泄漏。

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