无法解析MdlDialogReference的所有参数

Question

我正在尝试使用angular2-mdl组件并显示一个对话框。只有当我需要使用MdlDialogReference时，我才会得到这个错误。如果我不尝试注入MdlDialogReference，我可以创建对话框。

我见过其他类似的答案，但我似乎无法将其转化为我的解决方案。要做到这一点，还需要做些什么呢？

一些文件:使用角2.4.1

package.json

... 
"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",
...

system.config.js

(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);

app.module.ts

//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：(?)的所有参数。CompileMetadataResolver._getDependenciesMetadata (modules/@angular/compiler/bundles/compiler.umd.js:18477:33)在SyntaxError.BaseError as constructor at new SyntaxError (modules/@angular/compiler/bundles/compiler.umd.js:1793:18) at CompileMetadataResolver._getTypeMetadata (modules/@angular/compiler/bundles/compiler.umd.js:18352:28) at modules/@angular/compiler/bundles/compiler.umd.js:18340:23 (modules/@angular/compiler/bundles/compiler.umd.js:18340:23) at CompileMetadataResolver.getProviderMetadata (modules/@angular/compiler/bundles/compiler.umd.js:18582:42) at CompileMetadataResolver.getProviderMetadata (modules/@angular/compiler/bundles/compiler.umd.js:18540:51) at Array.forEach (modules/@angular/compiler/bundles/compiler.umd.js:18540:51) at Array.forEach(modules/@angular/compiler/bundles/compiler.umd.js:18540:51) at CompileMetadataResolver._getProvidersMetadata (modules/@angular/compiler/bundles/compiler.umd.js:18540:51) at CompileMetadataResolver._getProvidersMetadata (modules/@angular/compiler/bundles/compiler.umd.js:18507:21) at CompileMetadataResolver._getProvidersMetadata (modules/@angular/compiler/bundles/compiler.umd.js:18191:52)在。_loadModules (modules/@angular/compiler/bundles/compiler.umd.js:27288:66) at JitCompiler._compileModuleAndComponents (modules/@angular/compiler/bundles/compiler.umd.js:27248:54) at JitCompiler.compileModuleAsync (modules/@angular/compiler/bundles/compiler.umd.js:27214:23) at PlatformRef_._bootstrapModuleWithZone (modules/@angular/core/bundles/core.umd.js:8496:29)

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