无法解析MdlDialogReference的所有参数

Question

我正在尝试使用Angular2-MDL组件并显示一个对话框。只有当我需要使用MDLDialogReference时，才会出现此错误。只要不插入mdldialogreference就可以创建对话框。

我见过类似这样的问题的其他答案，但我似乎无法将其转化为我的解决方案。需要做些什么才能让它不失败？

... 
"dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.4.1",
    "@angular/upgrade": "2.4.1",
    "angular2-mdl": "^2.13.2",
    "core-js": "^2.4.1",
    "material-design-lite": "1.3.0",
...

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            'rxjs': 'npm:rxjs',
            'angular2-mdl': 'npm:angular2-mdl'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-mdl': {
                main: 'bundle/angular2-mdl.js'
            }
        }
    });
})(this);

//angular
import { MdlModule, MdlDialogReference } from 'angular2-mdl';

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

//routing
import { routing, appRoutingProviders } from './app.routing';
import { AppComponent } from './app.component';

//pages
...

//components
import { MessageDialogComponent } from './components/messageDialog.component';

@NgModule({
    imports: [
        BrowserModule,
        DateTimePickerModule,
        MdlModule,
        FormsModule,
        HttpModule,
        routing
    ],
    providers: [
        appRoutingProviders,
        MdlDialogReference,
        MessageDialogComponent,
    ],
    declarations: [
        AppComponent,
        MessageDialogComponent,
    ],
    bootstrap: [AppComponent],
    entryComponents: [MessageDialogComponent]
})
export class AppModule { }

MessageDialog.component.ts

import { Component, OnInit, HostListener, Inject } from '@angular/core';

import { MdlDialogService, MdlDialogReference } from 'angular2-mdl';

@Component({
    moduleId: module.id,
    selector: 'message-dialog',
    templateUrl: 'messageDialog.component.html'
})
export class MessageDialogComponent implements OnInit {


    constructor(@Inject(MdlDialogReference) private dialog: MdlDialogReference)
    { }

    public ngOnInit() {

    }

    @HostListener('keydown.esc')
    public onEsc(): void {
        this.dialog.hide();
    }
}

错误：无法解析MdlDialogReference：（？）的所有参数。在SyntaxError.zoneawareerror(http://localhost:5111/node_modules/zone.js/dist/zone.js:992:33)在SyntaxError.baseerror[as constructor](http://localhost:5111/node_modules/@angull/compiler/bundles/compiler.js:1590:18)在新的SyntaxError(http://localhost:5111/node_modules/@angull/compiler.js:1793:18)在/compiler/bundles/compiler.umd.js:18477:33)在CompileMetadataResolver._getTypeMetadata(http://localhost:5111/node_modules/@angull/compiler/bundles/@angull/compiler/bundles/compiler.js:18352:28)在.umd.js:18582:42)在eval(http://localhost:5111/node_modules/@angull/compiler/bundles/compiler.umd.js:18540:51)在array.foreach（本机）在CompileMetadataResolver._GetProvidersMetadata(http://localhost:5111/node_modules/@angull/compiler/bundles/compiler.umd.js:18507:21)at compileMetadata.getngModuleMetadata(http://localhost:5111/node_modules/@angull/compiler/bundles/compiler.18507:21)at//localhost:5111/node_modules/@angull/compiler/bundles/compiler.umd.js:27248:54)在jitcompiler.compileModuleasync(http://localhost:5111/node_modules/@angull/compiler/bundles/compiler.umd.js:27214:23)在

Answer 1

在打开对话框之前，您不能使用MdlDialogReference，因此您可以通过showCustomDialog返回的可观察的访问它，如下所示

this.dialogService.showCustomDialog({
  component: CustomDialogComponent, 
  providers: [{ provide: "data", useValue: data }],     
  isModal: true,
  clickOutsideToClose: true
}).subscribe( (ref: MdlDialogReference) => {
  ref.onHide().subscribe(() => {
    this.foo();
  })
});