Question

我重新考虑了这个问题，因为它没有以类似的方式解决我的问题。

我仍然有错误'没有MdDialogRef的提供程序'，即使我按照官方教程一步步完成。

我有两个组成部分。第一部分：

import { MdDialog} from "@angular/material";

import { DocumentDialogComponent } from './document-dialog.component';    

@Component({
  selector: 'documents-list',
  template
})
export class DocumentsListComponent {

  constructor(
     public dialog: MdDialog) {
  }

  openFormDialog() {

   let dialogRef  = this.dialog.open(DocumentDialogComponent,
   {
   }
   );
   dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
   });
  }

我的第二部分（对话）：

import { MdDialogRef} from "@angular/material";

@Component({
 selector: 'document-dialog',
 template
 })

export class DocumentDialogComponent {
    constructor(
        public dialogRef: MdDialogRef<DocumentDialogComponent>
    ) {}
}

我的模块配置：

  import { MaterialModule } from "@angular/material";
  import { DocumentsListComponent } from './documents-list.component';
  import { DocumentDialogComponent } from './document-dialog.component';

  imports : [
    MaterialModule.forRoot() 
   ],

  declarations: [
      AppComponent,
      DocumentListComponent,
      DocumentDialogComponent
    ],
    entryComponents: [
      AppComponent,
      DocumentListComponent,
      DocumentDialogComponent
    ],
    providers: [
    ],
    bootstrap: [
      AppComponent
    ]

为什么我仍然有错误：

Error in ./DocumentsListComponent class DocumentsListComponent - inline template:0:167 caused by: No provider for MdDialogRef!

Answer 1

我删除了模板中的<DocumentsListComponent></DocumentsListComponent>标记，现在可以正常使用。

Answer 2

我们可以通过使用 componentInstance 属性在 DocumentDialogComponent 中设置引用来消除此错误。

我可以通过open方法返回引用的componentInstance来设置其属性，而不是将MdDialogRef注入到组件中。

以下是修改后的工作代码：

import { MdDialog} from "@angular/material";

import { DocumentDialogComponent } from './document-dialog.component';    

@Component({
  selector: 'documents-list',
  template
})
export class DocumentsListComponent {

  constructor(
     public dialog: MdDialog) {
  }

  openFormDialog() {

   let dialogRef  = this.dialog.open(DocumentDialogComponent);

    //set the reference here
    dialogRef.componentInstance.dRef = dialogRef;

   dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
   });
  }

对话框组件位于：

import { MdDialogRef} from "@angular/material";

@Component({
 selector: 'document-dialog',
 template
 })

export class DocumentDialogComponent {
    public dRef:MdDialogRef<DocumentDialogComponent>
    constructor() {}
}

没有MdDialogRef的提供者

2 个答案: