从 canActivate 创建时，Angular 材质对话框未接收 MAT_DIALOG_DATA

Question

我正在尝试在

canActivate

函数中读取给定路线上的查询参数，如果它不存在，则显示一个模式，说明它无法正常工作。

当我更多地考虑这一点时，因为它只应该在应用程序第一次启动时发生，所以我想我将使用 APP_INITIALIZER 来移动提供程序中的逻辑。

也就是说，我对无法正确注射

MAT_DIALOG_DATA

感到非常沮丧，我想：

• 1. 明白为什么
• 2. 寻找解决方法

在分享最小重现之前，让我先带您浏览一下我编写的代码：

bootstrapApplication(App, {
  providers: [
    importProvidersFrom(MatDialogModule),
    provideRouter([
      {
        path: '',
        component: FooComponent,
        canActivate: [
          () => {
            const dialog = inject(MatDialog);
            dialog.open(DialogComponent, {
              data: {
                helloWorld: true,
              },
            });
            return true;
          },
        ],
      },
    ]),
  ],
});

我确保导入

MatDialogModule

，然后定义一个虚拟路由以具有

canActivate

。在这里，我打开一个对话框，尝试在其中传递一些数据。

对话框组件定义如下：

export class DialogComponent {
  @Inject(MAT_DIALOG_DATA) public dialogData: any;
}

和景色

Data received in the dialog:

<pre>{{ dialogData | json }}</pre>

问题在于

dialogData

在这里始终未定义。

---

我怀疑，从

canActivate

，我得到了一个不同的注入器，它在某种程度上搞乱了用这里的数据启动对话框的想法。但这应该像更换喷油器一样简单吗？或者甚至手动覆盖注入器来自己定义

MAT_DIALOG_DATA

标记？

我也试过了，但没用：

const newInjector = Injector.create({
  providers: [
    {
      provide: MAT_DIALOG_DATA,
      useValue: {
        helloWorld: true,
      },
    },
  ],
  parent: inject(Injector),
});

dialog.open(DialogComponent, {
  data: {
    helloWorld: true,
  },
  injector: newInjector
});

我也尝试过出于绝望而传递

ViewContainerRef

，但我没想到会起作用。

我在这里缺少什么？谁能解释一下并给出解决方法吗？

这是 Stackblitz 重现。

编辑：

我只是尝试将我的代码迁移到

APP_INITIALIZER

，但我遇到了完全相同的问题，所以我别无选择。

Answer 1

请更新对话框组件代码，我认为我们需要在构造函数内使用注入器进行依赖注入才能工作！

import { CommonModule } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css'],
  standalone: true,
  imports: [CommonModule, MatDialogModule],
})
export class DialogComponent {
  public dialogData: any;

  constructor(@Inject(MAT_DIALOG_DATA) private data: any) {
    this.dialogData = data;
  }
}

堆栈闪电战