Question

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

我的代码示例：
首先， localhost / home加载HomeComponent ，然后调用以下ngOnInit（）：

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

然后，在 HomeComponent 中，我使用[routerLink]导航到 localhost / user 会加载 UserComponent ，
和以下名为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组件将通过路线导航重新加载，并在使用ngOnInit()装饰器时运行OnInit。使用路由参数时，可能会有一些例外。但是，重新初始化是标准行为。另一方面，模块和单例服务仅初始化一次。

例如，您可以让[单个]服务加载一次（例如，如果您希望变量持久化）：

// 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

这取决于您的导航方式以及路线的配置方式。假设您有一条路线“客户/地址/编辑”和“客户/地址/视图”

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

router.navigate（['./ edit'，33]，{relativeTo：route}）;

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

router.navigate（['customer / addresses / edit'，33]）;

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

角度：每次导航都会调用ngOnInit（）

2 个答案: