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

无法解析角度7中MatDialogRef的所有参数

1 个答案: