Как использовать директивы диалога Angular 4?

Я разрабатываю веб-приложение Angular, используя:

  • Угловой 4.1.2
  • Угловой материал 2.0.0-бета.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:

Любое руководство будет очень кстати. Вот некоторые дополнительные подробности моего проекта:

Для моей первоначальной разработки я создал модуль Angular с именем AngularMaterialModule для управления моими материалами Angular. Вот краткое изложение:

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 использования шаблонов SPA Microsoft ASP.Net.

В моем файле 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 {
}

angular-material2
person TDC    schedule 30.09.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вам нужно импортировать фактический диалоговый модуль в модуль, в котором вы хотите его использовать.

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,
  ],
})
person VtoCorleone    schedule 30.09.2017