如何使用角4对话框指令？
如何使用角4对话框指令？
提问于 2017-09-30 08:31:31
我正在开发一个角web应用程序，使用：
- 角4.1.2
- 角材料2.0.0-β
我正在尝试创建一个简单的模态对话框，在读取角度指南文档(对话角材料)时，我发现有几个指令可以使对话框内容的结构变得更容易。
我不知道如何实现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，用于管理我的角材料。以下是它的摘要：
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解决方案是利用Microsoft模板使用dotnet new angular创建的。
在我的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 {
}Stack Overflow用户
回答已采纳
发布于 2017-09-30 14:53:44
您需要将实际的对话框模块导入要在其中使用的模块。
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,
],
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46501016
复制相关文章
相似问题
腾讯云开发者
