NullInjectorError:没有MatDialogRef的提供者

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了NullInjectorError:没有MatDialogRef的提供者相关的知识,希望对你有一定的参考价值。

我不能像文档中描述的那样注入MatDialogRef:https://material.angular.io/components/dialog/overview

当我试图这样做时,我有错误:

错误错误:StaticInjectorError [MatDialogRef]:StaticInjectorError [MatDialogRef]:NullInjectorError:没有MatDialogRef的提供程序!

app.module.ts

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 {}

home.component.ts

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, {});
    }
}

registration.component.ts

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
			);
	}
}
答案

感谢@Edric,我通过从MatDialogModule而不是MatDialog导入MatDialogRef@angular/material/dialog@angular/material解决了这个问题。

另一答案

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

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

使用此提供程序,该服务作为单例使用,我的对话框将被共享,提供程序错误消失了。

另一答案

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

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

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

  1. 在终端中,在控制台中键入以下内容: npm install web-animations-js
  2. 完成安装后,取消注释polyfills.ts中Angular Animations的行(如果不存在则添加它): 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';
另一答案
  • 在您的模块中:仅从角度/材料导入MatDialogModule就足够了。不需要导入和提供:MatDialogRef
  • 在您的代码中DialogComponent import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
  • 以上是我遵循的步骤。不确定为什么需要从Dialog导入它
  • 但是,您能否澄清一下您在html /模板中使用的选择器?如果您在模板中使用了“registration-component”,那么这可能就是您收到此错误的原因。我从材料指南中尝试了完全相同的例子。我不小心使用了'dialog-overview-example-dialog'而不是'dialog-overview-example'。我得到了同样的错误。

以上是关于NullInjectorError:没有MatDialogRef的提供者的主要内容,如果未能解决你的问题,请参考以下文章

NullInjectorError:ReducerManager 没有提供程序

角度业力 - NullInjectorError:InjectionToken 配置没有提供者

NullInjectorError:没有 HttpClient 的提供者

NullInjectorError:没有提供 DecimalPipe

Angular 9:NullInjectorError:没有 CompilerFactory 的提供者

Angular:NullInjectorError:没有HttpClient的提供者[重复]