Comment utiliser les directives de dialogue Angular 4?

Question

Je développe une application web angulaire à l'aide:

• angulaire 4.1.2
• Matériel angulaire 2.0.0-beta.11

Je suis en train de créer un simple dialogue modal et lire les documents du guide angulaire (Dialog | Angular Material) Je vois qu'il existe plusieurs directives disponibles pour faciliter la structuration du contenu du dialogue.

Je ne peux pas travailler sur la façon de mettre en œuvre md-dialog-title, <md-dialog-content>, <md-dialog-actions> ou md-dialog-close. Les attributs, lorsqu'ils sont appliqués à un élément, semblent faire aucune différence et la <md-dialog-content> et <md-dialog-actions> créer des erreurs comme ceci:

Unhandled Promise rejection: Template parse errors: 'md-dialog-content' is not a known element:

Toute orientation serait bienvenu s'il vous plaît. Voici quelques détails supplémentaires de mon projet:

Pour mon développement initial, j'ai créé un module angulaire, nommé AngularMaterialModule pour gérer mes matériaux angulaires. Voici un résumé de celui-ci:

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 { } 

Ma solution Visual Studio a été créée en utilisant dotnet new angular en profitant des modèles SPA Microsoft ASP.Net.

Dans mon dossier app.module.client.ts j'importer le AngularMaterialModule, décrit ci-dessus, comme ceci:

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

Vous devez importer le module de dialogue réel dans le module que vous voulez utiliser dans

import { MdDialogModule } from '@angular/material'; 

@NgModule({ 
    imports: [ 
    MdDialogModule 
    ], 
}) 

.

Après cela, c'est un simple et suivre l'exemple dans leurs documents

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(); 
    } 

} 

Si vous voulez créer un composant de dialogue personnalisé, vous devrez l'ajouter à votre entryComponents dans le module.

import { MdDialogModule } from '@angular/material'; 

@NgModule({ 
entryComponents: [ 
    AddressDialogComponent, 
    ], 
    imports: [ 
    MdDialogModule, 
    ], 
    exports: [ 
    AddressDialogComponent, 
    ], 
})