Не удается разрешить все параметры для MatDialogRef в угловых 7

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');
    });
  }
}

login.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],