Angular：在每次导航中调用 ngOnInit()

Question

我使用 Angular 9 并使用 RouterModule。
我在某处读到 ngOnInit() function 在导航之间只调用一次，
我的意思是每个组件只初始化一次（ngOnInit() 函数）。
我发现那不是真的。

我的代码示例：
首先， localhost/home 加载HomeComponent 并调用以下 ngOnInit()：

  ngOnInit(): void
  {
    console.log('init home component');
  }

然后，在HomeComponent我使用 [routerLink] 导航到加载UserComponent的localhost/user ，
并调用以下 ngOnInit() ：

  ngOnInit(): void
  {
    console.log('init user component');
  }

最后，在UserComponent我使用 [routerLink] 导航到localhost/home再次加载HomeComponent ，
并调用以下 ngOnInit() ：

  ngOnInit(): void
  {
    console.log('init home component');
  }

结果， HomeComponent再次初始化。
我错过了什么吗？
谢谢！

Answer 1

Angular 9.x 组件将使用路线导航重新加载，并在使用OnInit装饰器时运行ngOnInit() 。 使用路由参数时可能会有一些罕见的例外； 但是，重新初始化是标准行为。 另一方面，模块和 singleton 服务只初始化一次。

例如，您可以让 [singleton] 服务加载一次（例如，如果您希望变量保持不变）：

// user.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

参考： https://angular.io/guide/singleton-services

在相关的说明中，虽然模块只加载一次，但您可以将它们的加载推迟到用户访问某些路由时。 这对于最初加载可能需要很长时间的大型应用程序很有帮助。 延迟加载示例：

// xxx-routing.module.ts
const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

参考： https://angular.io/guide/lazy-loading-ngmodules

Answer 2

这取决于您的导航方式以及路线的配置方式。 假设您有一条路线 customer/addresses/edit 和 customer/addresses/view

视图和编辑是地址的子路由。 您为它们附加一个 id，以便您可以获取地址。 假设您在视图组件中，并且您

router.navigate(['./edit', 33], {relativeTo: route});

它不会运行地址组件的 ngOnInit。 如果你跑

router.navigate(['客户/地址/编辑', 33]);

整个组件树将被重新加载，并且 ngOnInit 方法将被调用。