Не удается разрешить все параметры для 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: (?). в SyntaxError.ZoneAwareError ( http://localhost:5111/node_modules/zone.js/dist/zone.js:992:33) в SyntaxError.BaseError [в качестве конструктора] ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:1590:18) в новой ошибке SyntaxError ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) в CompileMetadataResolver._getDependenciesMetadata ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18477:33) в CompileMetadataResolver._getTypeMetadata ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18352:28) в CompileMetadataResolver._getInjectableMetadata ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18340:23) в CompileMetadataResolver.getProvider ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18582:42) на eval ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18540:51) в Array.forEach (собственный) в CompileMetadataResolver._getProvidersMetadata ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18507:21) в узле CompileMetadataResolver.getNgModuleMetaddules ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18191:52) в JitCompiler._loadModules ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:27288:66) в JitCompiler._compileModuleAndComponents ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:27248:54) в JitCompiler.compileModuleAsync ( http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:27214:23) в PlatformRef _._ bootstrapModuleWithZone ( http://localhost:5111/node_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();
  })
});