我正在使用以下方式开发Angular Web应用程序:
我正在尝试创建一个简单的模态对话框,并在阅读Angular指南文档(Dialog | Angular Material)时,我发现有几个指令可以更容易地构建对话框内容。
我无法弄清楚如何实施md-dialog-title
,<md-dialog-content>
,<md-dialog-actions>
或md-dialog-close
。应用于元素时,属性似乎没有任何区别,<md-dialog-content>
和<md-dialog-actions>
会产生如下错误:
Unhandled Promise rejection: Template parse errors: 'md-dialog-content' is not a known element:
请非常欢迎任何指导。以下是我项目的更多细节:
对于我的初始开发,我创建了一个名为AngularMaterialModule
的Angular模块来管理我的Angular Materials。以下是摘要:
import { NgModule } from '@angular/core';
import {
MdAutocompleteModule,
MdButtonModule,
....
MdStepperModule,
StyleModule,
} from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table';
import { A11yModule } from '@angular/cdk/a11y';
import { BidiModule } from '@angular/cdk/bidi';
import { OverlayModule } from '@angular/cdk/overlay';
import { PlatformModule } from '@angular/cdk/platform';
import { ObserversModule } from '@angular/cdk/observers';
import { PortalModule } from '@angular/cdk/portal';
@NgModule({
exports: [
// Material Modules
MdAutocompleteModule,
MdButtonModule,
....
PlatformModule,
PortalModule
],
declarations: []
})
export class AngularMaterialModule { }
我的Visual Studio解决方案是使用dotnet new angular
利用Microsoft ASP.Net SPA模板创建的。
在我的app.module.client.ts
文件中,我导入AngularMaterialModule
,如上所述,如下所示:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AngularMaterialModule } from './core/angular-material.module';
import { sharedConfig } from './app.module.shared';
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
BrowserModule,
BrowserAnimationsModule,
AngularMaterialModule,
FormsModule,
HttpModule,
...sharedConfig.imports
],
providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin }
]
})
export class AppModule {
}
答案 0 :(得分:3)
您需要将实际的对话框模块导入到要使用它的模块中。
import { MdDialogModule } from '@angular/material';
@NgModule({
imports: [
MdDialogModule
],
})
之后,它是一个直接的,并按照他们的文档中的示例
import {Component, Inject} from '@angular/core';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
/**
* @title Dialog Overview
*/
@Component({
selector: 'dialog-overview-example',
templateUrl: 'dialog-overview-example.html'
})
export class DialogOverviewExample {
animal: string;
name: string;
constructor(public dialog: MdDialog) {}
openDialog(): void {
let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: { name: this.name, animal: this.animal }
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animal = result;
});
}
}
@Component({
selector: 'dialog-overview-example-dialog',
templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {
constructor(
public dialogRef: MdDialogRef<DialogOverviewExampleDialog>,
@Inject(MD_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
}
如果您想创建自定义对话框组件,则必须将其添加到模块中的entryComponents
。
import { MdDialogModule } from '@angular/material';
@NgModule({
entryComponents: [
AddressDialogComponent,
],
imports: [
MdDialogModule,
],
exports: [
AddressDialogComponent,
],
})