Question

我正在尝试使用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);

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）at 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.getProviderMetadata （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（native）at CompileMetadataResolver._getProvidersMetadata （http://localhost:5111/node_modules/@angular/compiler/bundles/compiler.umd.js:18507:21）在CompileMetadataResolver.getNgModuleMetadata （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返回的observable来访问它

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

无法解析MdlDialogReference的所有参数

1 个答案: