我如何使用Angular 4 Dialog指令?

时间:2017-09-30 08:31:32

标签: angular-material2

我正在使用以下方式开发Angular Web应用程序:

  • Angular 4.1.2
  • Angular Material 2.0.0-beta.11

我正在尝试创建一个简单的模态对话框,并在阅读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 {
}

1 个答案:

答案 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,
  ],
})