Question

我无法按照文档中所述注入MatDialogRef：https://material.angular.io/components/dialog/overview

当我试图这样做时，我得到了错误：

错误错误：StaticInjectorError [MatDialogRef]： StaticInjectorError [MatDialogRef]： NullInjectorError：没有MatDialogRef的提供者！

app.module.ts

＆＃13;

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import {
	MatInputModule,
	MatDialogModule,
	MatProgressSpinnerModule,
	MatButtonModule,
	MatDialog,
	MatDialogRef
} from '@angular/material';

import { ApiModule } from '../api/api.module';
import { RoutingModule } from '../routing/routing.module';

import { RegistrationComponent } from './components/registration.component';
import { LoginComponent } from './components/login.component';

import { AccountService } from './services/account.service';

@NgModule({
	imports: [
		BrowserModule,
		MatInputModule,
		MatDialogModule,
		MatProgressSpinnerModule,
		MatButtonModule,
		FormsModule,
		RoutingModule,
		ApiModule
	],
	declarations: [
		RegistrationComponent,
		LoginComponent
	],
	entryComponents: [
		LoginComponent,
		RegistrationComponent
	],
	providers: [
		AccountService,
		MatDialog,
		MatDialogRef
	]
})
export class AccountModule {}

＆＃13;

home.component.ts

＆＃13;

import { Component } from '@angular/core';

import { MatDialog } from '@angular/material';
import { RegistrationComponent } from '../account/components/registration.component';

@Component({
    moduleId: module.id.replace('compiled', 'app'),
    templateUrl: 'home.component.html'
})
export class HomeComponent
{
    constructor(private modalService: MatDialog) {}

    public openModal() : void
    {
        let dialog = this.modalService.open(RegistrationComponent, {});
    }
}

＆＃13;

registration.component.ts

＆＃13;

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { MatDialogRef } from '@angular/material/dialog';

import { User } from '../../../models/domain/User';
import { ApiUserService } from '../../api/entity-services/user.service';
import { AuthService } from '../../auth/auth.service';
import { AccountService } from '../services/account.service'

@Component({
	selector: 'registration-component',
	templateUrl: 'app/modules/account/templates/registration.component.html'
})
export class RegistrationComponent
{
	public user :User = new User();

	public errorMessage :string;

	public isLoading :boolean;

	constructor
	(
		private userService :ApiUserService,
		private authService :AuthService,
		private accountService :AccountService,
		private router :Router,
		public dialogRef :MatDialogRef<RegistrationComponent>
	)
	{
		this.isLoading = false;
	}

	public onSubmit(e) :void
	{
		e.preventDefault();
		this.isLoading = true;

		this.userService
			.Create(this.user)
			.subscribe(
				user =>
				{
					this.user.id = user.id;
					this.user.login = user.login;


					this.authService
						.Login(this.user)
						.subscribe(
							token =>
							{
								this.accountService.Load()
									.subscribe(
										account =>
										{
											this.user = account;
											this.isLoading = false;
											this.dialogRef.close();

											let redirectRoute = account.activeScopeId
												? `/scope/${account.activeScopeId}`
												: '/scope-list/';

											this.router.navigate([redirectRoute]);
										},
										error => this.errorMessage = <any>error
									);
							},
							error => this.errorMessage = <any>error
						);
				},
				error => this.errorMessage = <any>error
			);
	}
}

＆＃13;

Answer 1

感谢@Edric，我们通过从MatDialogModule而不是MatDialog <导入MatDialogRef，@angular/material/dialog和@angular/material来解决问题/ p>

Answer 2

将对话框添加到要在许多组件中共享的服务时出现此错误。只是为了澄清，在将对话框移至服务之前，该应用程序中未存在该错误。解决方案是在主模块中包含自定义提供程序MatDialogRef

  import {DialogService} from './services/dialog.service';
  import {MatDialogModule, MatDialogRef} from '@angular/material/dialog';
  ...
  imports: [
    ...
    MatDialogModule
  ],
  providers: [
     DialogService, {provide: MatDialogRef, useValue: {}},
  ],
  ...

使用此提供程序，该服务作为单例工作与我的对话框共享，并且提供程序错误消失了。

Answer 3

例如，您正在使用app-checkout

如果您同时使用“对话框”和“常规”方式使用组件，则可能会发生。在普通html文件中添加app-checkout。

解决方案1：如果您不需要以常规方式将<app-checkout> </app-checkout>导入html文件中，则将其删除

在对话框和html文件中均使用的解决方案2。代替这个：

// ... something have selector: "app-checkout",
 constructor(
    public dialogRef: MatDialogRef<CheckoutComponent>,
    @Inject(MAT_DIALOG_DATA) public dialogData: any
  ) {}

您需要注入（使其成为可选注入）：

// ... the same above
  private dialogRef = null;
  private dialogData;
  constructor(private injector: Injector) {
      this.dialogRef = this.injector.get(MatDialogRef, null);
      this.dialogData = this.injector.get(MAT_DIALOG_DATA, null);
  }

Answer 4

component.ts 和 spec.ts 中导入的路径必须相同

例如：

// in the component and spec files
import { MatDialogRef } from '@angular/material/dialog';

或

// in the component and spec files
import { MatDialogRef } from '@angular/material';

Answer 5

可能是因为您不包含Angular动画所需的Web Animations API polyfill，因为它依赖于API。

这是本地支持它的浏览器的caniuse。目前只有Chrome，Firefox和Opera支持Web动画API。

无论如何，您必须按照以下步骤进行填充：

在终端中，在控制台中键入以下内容：
```
npm install web-animations-js
```
完成安装后，取消注释polyfills.ts中的角度动画线（如果不存在则添加它）：
```
import 'web-animations-js'; // Uncomment this line
```

或者，您可以尝试从单独的端点导入模块，如下所示：

自：

import { MatButtonModule, MatDialogModule } from '@angular/material';

要：

import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';

Answer 6

在您的模块中：只从angular / material导入MatDialogModule就足够了。不需要导入和提供：MatDialogRef
在您的代码中，DialogComponent import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
以上是我遵循的步骤。不确定为什么需要从Dialog
但是，您能澄清一下您在html /模板中使用的选择器吗？如果您在模板中使用了“registration-component”，那么这可能就是您收到此错误的原因。我从材料指南中尝试了完全相同的例子。我不小心使用了'dialog-overview-example-dialog'而不是'dialog-overview-example'。我得到了同样的错误。

Answer 7

对我来说，问题是我已将Dialog组件添加到其他HTML模板中只是为了对其进行测试。一旦删除它，OP中的错误就消失了，并且可以正常工作。

Answer 8

从构造函数中删除dialogRef：

https://stackblitz.com/edit/angular-dialog-update?file=src%2Fapp%2Fapp.component.ts

Answer 9

除上述所有以外，如果您在应用程序的任何模板文件中都引用了Component选择器，则也可能会出现此错误。 MatDialog组件只能由MatDialog.dialog.open（）方法调用，而不能通过组件选择器

调用

不幸的是，出于许多原因，可能会抛出相同的错误消息。

Answer 10

我遇到了此错误，并修复了该问题，

检查是否在这样的打字稿文件中插入了导入语句

从“ @ angular / material / dialog”导入{MAT_DIALOG_DATA，MatDialogRef};

检查构造函数

  constructor(@Optional() public dialogRef: MatDialogRef<GadgetAuthMessagesComponent>, @Inject(MAT_DIALOG_DATA) public message: string){ }

现在转到模块.ts并检查导入

import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';

在module.ts中，我们需要将MatDialogModule名称放在导入数组下

MatDialogModule
现在终于完成了，我们必须更新providers数组

      providers:
    [{
      provide: 'gadget-mlt',
      useValue: GadgetMltComponent,
  },
        {provide:MatDialogRef , useValue:{} },

        { provide: MAT_DIALOG_DATA, useValue: {} }

  ],

现在应该可以了，希望对您有所帮助！

Answer 11

只需在 dialogRef 声明前添加 @Optional()。

例如：

constructor(
    @Optional() public dialogRef: MatDialogRef<yourDialogComponentName>
) {
}

Answer 12

显然在我的代码中一切正常。问题是，在开发过程中，我为我的模态组件设置了一个时间路径，因此我可以像查看任何其他常规组件/视图一样查看它。在组件中，我有一个按钮可以触发在模态中打开本身，以便我可以测试它在实际打开时的外观。

所以我将打开 Dialog 的代码移到另一个组件，它似乎解决了问题。

Answer 13

传递给MatDialog open方法的组件应该像在the example中那样在其构造函数中注入MatDialogRef。

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

我将其注入正在调用MatDialog :: open的组件中，而不是传递给了导致此错误的open方法的组件中。

NullInjectorError：没有MatDialogRef的提供者

13 个答案: