无法解析MdlDialogReference的所有参数
[英]Can't resolve all parameters for MdlDialogReference
问题描述
I am trying to use angular2-mdl component and to display a dialog. 
我正在尝试使用angular2-mdl组件并显示一个对话框。 Only when I need to use MdlDialogReference do I get this error. 仅当我需要使用MdlDialogReference才会出现此错误。 I can create the dialog provided I try not to inject MdlDialogReference . 如果不尝试注入MdlDialogReference我可以创建对话框。
I have seen other answers to somthing like this but I cannot seem to transfer that into my solution. 我已经看到其他类似的答案，但是我似乎无法将其转移到我的解决方案中。 What needs to be done to get this to not fail? 要使它不失败，需要做什么？
Some files: Using angular 2.4.1 一些文件：使用angular 2.4.1
package.json 的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 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 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 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();
}
}
Error: Can't resolve all parameters for MdlDialogReference: (?).
1 个解决方案
解决方案1
0 2017-05-29 22:00:16
You're not able to use MdlDialogReference till a dialog is opened, so you can access it through the observable returned from showCustomDialog like this 在打开对话框之前，您将无法使用MdlDialogReference，因此您可以通过showCustomDialog返回的可观察对象访问它，如下所示：
this.dialogService.showCustomDialog({
component: CustomDialogComponent,
providers: [{ provide: "data", useValue: data }],
isModal: true,
clickOutsideToClose: true
}).subscribe( (ref: MdlDialogReference) => {
ref.onHide().subscribe(() => {
this.foo();
})
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.