为什么组件只创建了两次?

Why is the component only created twice?

我有一个单独的模块,其中导入了一个路由模块,其中的路由如下所示:

    const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'orders',
                component: MainComponent,
                children: [
                    {
                        path: '',
                        component: OrdersComponent,
                        pathMatch: 'full',
                    },
                    {
                        path: ':orderNumber',
                        component: OrdersComponent,
                    },
                ],
            }
        ],
    }];

this.location: Location, this.router: Router - Angular 服务

复制步骤:

  1. 使用 this.router.navigateByUrl('/orders'); - 我们看到 OrdersComponent 组件(以确保组件初始化后,我在控制台中向组件的构造函数添加了一条消息)。
  2. 使用 this.router.navigateByUrl('/orders/12345'); - 我们看到相同的 OrdersComponent 组件(消息再次出现在控制台中,即组件 OrdersComponent 已再次初始化)。
  3. 使用this.location.replaceState('/orders');
  4. 使用 this.router.navigateByUrl('/orders/98765'); - 我们在控制台中看不到消息 => 未调用组件构造函数。

我的问题是:为什么在重复步骤3和4(订单号可以是任意的)时,只为步骤1和2创建组件而不再创建?但是,如果将步骤 3 中的 this.location.replaceState('/orders'); 替换为 this.router.navigateByUrl('/orders');,那么每次重复第 3 步和第 4 步时都会调用构造函数?

Angular 正在重用该组件,并且仅在导航到您之前从未去过的路线时才初始化该组件。当导航到您已经到达的路线时,该组件将被重复使用。

如果你必须 运行 一个特定的函数要么寻找另一个地方来放置你的函数调用而不是在构造函数中。也许看看 angular 生命周期 https://angular.io/guide/lifecycle-hooks

或者订阅 ActivatedRoute 和 运行 每次路由更改时您的函数。