无法在 angular 7 中解析 MatDialogRef 的所有参数

Question

我正在尝试以角度实现对话框弹出窗口。 我一次又一次地遇到同样的错误。 无法解析 MatDialogRef 的所有参数：(?, ?, ?, ?)

我想要做的是从我的标题上的图标打开登录作为对话框窗口。

我的代码如下：

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
    
import {AppComponent} from './app.component';
import {HeaderComponent} from './modules/main/header/header.component';
import {LoginComponent} from './modules/login/login.component';
import {AppRoutingModule} from './app-routing.module';
import {MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule, MatDialogRef} from '@angular/material';
import {HttpClientModule} from '@angular/common/http';
    
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatDialogModule
  ],
  entryComponents: [
    LoginComponent
  ],
  providers: [{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}, MatDialogRef],
  bootstrap: [AppComponent]
})
export class AppModule {}

header.component.ts

import {Component, OnInit} from '@angular/core';
import {LoginComponent} from '../../login/login.component';
import {MatDialog} from '@angular/material';
    
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
    
  logoOriginal = 'assets/logo/logo.png';
  logoHovered = 'assets/logo/logo-hovered.png';
  logo: string;
    
  constructor(public dialog: MatDialog) {}
    
  ngOnInit() {
    this.logo = this.logoOriginal;
  }
    
  onMouseEnter() {
    this.logo = this.logoHovered;
  }
    
  onMouseLeave() {
    this.logo = this.logoOriginal;
  }
    
  openDialog(): void {
    const dialogRef = this.dialog.open(LoginComponent, {
      width: '250px',
    });
    
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

登录.component.ts

import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
    
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent {

  constructor(
    public dialogRef: MatDialogRef<LoginComponent>) {}

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

请帮我解决这个问题。 我已经提到了所有可用的答案，但没有一个解决了我的问题。

Answer 1

MatDialogRef不是提供者，而是参考。 从app.module.ts中的提供程序列表中删除它：

providers: [{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}, MatDialogRef],