Question

我正在研究Angular 4，我正在尝试设置材料包，在这里我试图尝试对话，但它不起作用，可能是因为材料包我不确定。

这是我的（dialog.components.ts）：

import {Component, OnInit} from '@angular/core';
import {MatDialogRef} from '@angular/material'

@Component({
    selector: 'app-dialog',
    templateUrl: './dialog.component.html',
    styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {

    public receivedNode: any;

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

    ngOnInit() {
    }

}

在我的模块中：

import {MatButtonModule,MatMenuModule,MatToolbarModule,MatIconModule,MatCardModule, MatDialogRef} from '@angular/material';


 @NgModule({
        imports: [
            CommonModule,
            MatButtonModule,
            MatMenuModule,
            MatToolbarModule,
            MatIconModule,
            MatCardModule,
            RouterModule.forRoot(
                appRoutes,
                {enableTracing: true}
            ),
        ],
        declarations: [],
        exports: [
            MatButtonModule,
            MatMenuModule,
            MatToolbarModule,
            MatIconModule,
            MatCardModule
        ],
        entryComponents: [DialogComponent],
        providers: [MatDialogRef]
    })
    export class DialogModule {
    }

我收到了这个错误：

有什么想法吗？

修改

我的通话功能：

openPopup(){
        const config = new MatDialogConfig();
        const dialogRef: MatDialogRef<DialogComponent> = this.dialog.open(DialogComponent, config);

        dialogRef.componentInstance.receivedNode = "test";
        console.log("test");
    }

Answer 1

从提供商列表中删除MatDialogRef。

这不是提供者，这是对Object的引用（以Ref结尾）

Answer 2

希望这有助于我拥有：

组件：

import { MatDialog } from '@angular/material';
import { DialogComponent } from './dialogs'; // component name of dialog can add multiple in here.

@Component({
    selector: 'yourComponent',
    templateUrl: './yourComponent.html'
})
export class YourComponent {

  private dialogRef: any;
  constructor(public dialog: MatDialog) {

  openPopup(){
    this.dialogRef = this.dialog.open(DialogComponent , {
                                    width: '250px',
                                    height: '25%',
                                    data: { errorcode: errorCode, errormessage: errorMessage }
                                });
                                this.dialogRef.updatePosition({ top: '3%', left: '20%' });
  }

在模块中：

import { DialogComponent } from './dialogs'; // component name of dialog
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatDialogModule } from '@angular/material';

@NgModule({
    declarations: [
        DialogComponent 
    ],
    imports: [
        BrowserModule,
        MatDialogModule
    ],
    entryComponents: [
        DialogComponent 
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})

最后一个对话框：

import {Component, OnInit} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
    selector: 'app-dialog',
    templateUrl: './dialog.component.html',
    styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {

    constructor(public dialogRef: MatDialogRef<DialogComponent>, 
                @Inject(MAT_DIALOG_DATA) private data: any) { } // this.data.errormessage contain error message. Not sure if need OnInit.

    ngOnInit() {
    } // I not use this I put the data in html and click on buttons there to interact with the component.

}

Answer 3

您只需要将其添加到提供程序中。对我来说，以下代码有效。如果您使用过MAT_DIALOG_DATA，则也需要添加它。

providers: [
{ 
provide: MatDialogRef,
useValue: []
 }, 
{ 
provide: MAT_DIALOG_DATA, 
useValue: [] 
}
]

Answer 4

我在使用 Angular 9 时遇到了同样的错误（无法解析 MatDialogRef 的所有参数：(?, ?).），尤其是在使用以下命令执行测试时Angular Material 模块。

这是我在 beforeEach() 部分的解决方案：

之前：

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

beforeEach(async(() => {
            TestBed.configureTestingModule({
                        ...
                        ...
                    providers: [
                        { provide: MatDialogRef },
                        { provide: MAT_DIALOG_DATA }
                    ]
            }).compileComponents();

    }));

之后：

import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';

beforeEach(async(() => {
            TestBed.configureTestingModule({
                    ...
                    ...
                    providers: [{
                        provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}
                    }]
            }).compileComponents();

无法解析MatDialogRef angular 4的所有参数

4 个答案: