Angular Can'；t解析MDLDIAlgreference的所有参数

我正在尝试使用

angular2 mdl

组件并显示一个对话框。只有当我需要使用

MdlDialogReference

时，才会出现此错误。只要我尽量不插入

MdlDialogReference

，我就可以创建对话框

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

部分文件：使用angular 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);

//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 { }

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

应用程序模块.ts

(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 { }

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

messageDialog.component.ts

(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 { }

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.ZoneWareerror （）在 SyntaxError.BaseError[作为构造函数] () 在新SyntaxError () 在CompileMetadataResolver上。\u getDependenciesMetadata () 在CompileMetadataResolver上。\u getTypeMetadata () 在CompileMetadataResolver.\u getInjectableMetadata () 在CompileMetadataResolver.getProviderMetadata () 评估时 () at Array.forEach（本机）at CompileMetadataResolver.\u getProvidersMetadata () 在CompileMetadataResolver.getNgModuleMetadata上 () 在JIT编译器上。\u加载模块 () 在JIT编译器上.\u编译模块和组件 () 在JitCompiler.compileModuleAsync上 () 在PlatformRef.\uBootstrapModule WithZone （）

---

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

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

---

未使用此对话框，但Material2对话框工作正常，易于设置。您是如何使用MessageDialogComponent的？无法看到任何dialogService.showCustomDialog调用。此外，您不需要将MdlDialogReference和MessageDialogComponent添加到提供程序数组中。您是否检查了这个示例：和wiki:looks的

MdlDialogReference

来执行

this.dialog.hide（）@michael。我确实遵循了那个指南。我能够打开对话框“无问题”，但是引用
MdlDialogReference
会导致此问题。如果我可以不使用它，那就太好了。但我需要一种方法来轻松关闭dialog@aqwert当然可以，但我看不到像dialogService.showCustomDialog这样的调用。你是如何打开对话框的？仅当打开对话框时，才会创建MdlDialogReference实例。