Angular：通过路由切换页面后，ngOnInit()不会被触发的问题

描述：

我在在使用angular 9版本，出现这样一个问题：我通过路由进入页面时候，会执行ngOnInit，切换到其他页面再切回，此时这个页面的ngInit不会主动执行

原因：

在Angular中，当一个组件被创建时，它的生命周期方法 ngOnInit() 会在组件初始化时自动执行一次。然而，当你通过路由导航切换到其他页面，再切回到原来的组件页面时，ngOnInit() 方法不会再次主动执行。

这是因为在路由导航过程中，Angular的路由器默认会重用已经创建的组件实例，而不是销毁和重新创建。因此，ngOnInit() 方法只会在组件第一次创建时调用一次。

如果你希望在每次切换回组件页面时都执行某些操作，可以考虑使用Angular的 ActivatedRoute 和 Router 来监听路由事件并触发相应的处理逻辑。

下面是一个示例代码，展示了如何在每次路由切换回组件时主动执行一些代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';

@Component({
  ...
})
export class YourComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit(): void {
    // 监听路由导航事件
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 检查当前路由是否与要执行代码的组件匹配
        if (this.route.snapshot.routeConfig.path === 'your-route-path') {
          // 执行你想要的操作，比如刷新数据等
          this.yourCustomFunction();
        }
      }
    });
  }

  yourCustomFunction(): void {
    // 在这里编写你想要执行的代码
    console.log('ngOnInit is called every time the route is navigated to');
  }
}

在上面的示例中，我们使用了 Router 的 NavigationEnd 事件来监听路由导航事件。然后，我们检查当前的路由路径是否与组件的路径匹配，并在匹配时调用自定义的方法 yourCustomFunction()。

请注意，上述代码中的 'your-route-path' 应该替换为你实际的路由路径，以便与要执行代码的组件相匹配。

个人的解决方案：

将要执行的函数放到其他钩子函数下，例如ngAfterViewInit()

由导航过程中，Angular的路由器默认会重用已经创建的组件实例，而不是销毁和重新创建。是否可以控制切换路由后，让之前的实例销毁？

在Angular中，路由器默认情况下会重用已经创建的组件实例，而不是销毁和重新创建。这是为了提高性能和减少资源开销。

但是，如果你希望在切换路由后销毁之前的组件实例，可以使用路由器提供的一些选项来控制组件的销毁和重新创建行为。

一种方法是在路由配置文件中设置 runGuardsAndResolvers 选项为 always。这将强制每次导航时都销毁之前的组件实例并重新创建一个新的实例。

扫描二维码关注公众号，回复： 16833773 查看本文章

const routes: Routes = [
  {
    path: 'example',
    component: ExampleComponent,
    runGuardsAndResolvers: 'always'
  }
];

另一种方法是使用 RouteReuseStrategy 接口定制路由器的重用策略。你可以实现自己的 RouteReuseStrategy 类，并在其中定义什么时候重用组件实例以及什么时候销毁组件实例。

下面是一个简单的示例：

import { RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }
}

然后，在你的模块中提供自定义的 RouteReuseStrategy：

import { RouteReuseStrategy } from '@angular/router';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';

@NgModule({
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppModule { }