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

当我试图这么做的时候,我犯了一个错误:

错误:StaticInjectorError[MatDialogRef]:

应用程序.单元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 {}

家组成部分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, {});
    }
}

登记组成部分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,i'v从@angular/material/dialog而不是@angular/material中导入了MatDialogModuleMatDialogMatDialogRef,从而解决了这个问题

Typescript相关问答推荐

通用默认值触发依赖通用约束变量的错误

如何将绑定到实例的类方法复制到类型脚本中的普通对象?

用泛型类型覆盖父类函数导致类型y中的Property x不能赋给基类型Parent中的相同属性."'''''' "

TypeScrip:基于参数的条件返回类型

如何编写一个类型脚本函数,将一个对象映射(转换)为另一个对象并推断返回类型?

我可以以这样一种方式键入对象,只允许它的键作为它的值吗?

如何 bootstrap TS编译器为类型化属性`T`推断正确的类型?

`fetcher.load`是否等同于Get Submit?

从子类集合实例化类,同时保持对Typescript中静态成员的访问

如何在Reaction 18、Reaction-Rout6中的导航栏中获取路由参数

Cypress-验证别名的存在或将别名中的文本与';if';语句中的字符串进行比较

三重融合视角与正交阵

仅当类型为联合类型时映射属性类型

如何实现允许扩展泛型函数参数的类型

是否使用类型将方法动态添加到类?

Typescript泛型-键入对象时保持推理

如何在TypeScript中声明逆变函数成员?

使用 fp-ts 时如何使用 TypeScript 序列化任务执行?

在Typescript 无法正常工作的 Three.js 中更新动画中的 GLSL 统一变量

为什么 Typescript 无法正确推断数组元素的类型?