Question

我正在使用以下方式开发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 {
}

Answer 1

您需要将实际的对话框模块导入到要使用它的模块中。

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

我如何使用Angular 4 Dialog指令？

1 个答案: