Angular 2：子路由跳转时如何避免加载父组件？

1. 调整路由匹配顺序 #

Angular路由按配置的从上到下顺序匹配，优先匹配更具体的路由。你之前的配置把missing放在missing/:id前面，导致访问missing/:id时会先匹配到missing路由，从而加载MissingComponent。

正确的路由配置需把missing/:id放在前面：

[
  {
    path: 'missing/:id',
    component: MissingDetailsComponent,
  },
  {
    path: 'missing',
    component: MissingComponent,
  }
]

这样访问/missing时会加载MissingComponent，访问/missing/xxx时只会加载MissingDetailsComponent，不会触发父组件的初始化逻辑。

2. 清理组件订阅（解决未销毁/内存泄漏问题） #

只要组件被实例化过，若未手动清理订阅就会存在内存泄漏风险。你需要在MissingComponent的ngOnDestroy钩子中取消所有订阅：

方法一：手动取消订阅 #

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({...})
export class MissingComponent implements OnDestroy {
  private subscriptions = new Subscription();

  ngOnInit() {
    const dataSubscription = this.someService.getData().subscribe(...);
    // 将订阅添加到集合中
    this.subscriptions.add(dataSubscription);
  }

  ngOnDestroy() {
    // 一次性取消所有订阅
    this.subscriptions.unsubscribe();
  }
}

方法二：使用async管道（推荐） #

如果是模板中使用的Observable，直接用async管道，Angular会自动在组件销毁时取消订阅：

<div *ngIf="data$ | async as data">
  {{ data }}
</div>

为什么之前的配置无效？ #

你之前将两个路由分开但顺序不对，Angular的前缀匹配规则会先匹配到missing路由（因为missing/:id的前缀包含missing），所以会加载MissingComponent。调整顺序后，更具体的missing/:id会被优先匹配，跳过missing路由的组件加载。

内容的提问来源于stack exchange，提问作者Michał B