Exemple de travail Angulaire 2.0 Matériel MdDialog Angulaire 2.0

Je suis en train de travailler sur un POC application, et je vais essayer d'obtenir les MdDialog composant de travail. Quelqu'un aurait-il un exemple de ce qu'à passer à la MdDialog méthode ouverte?

Angulaire 2.0:
https://github.com/angular/angular

Angulaire 2 Matériel:
https://github.com/angular/material2

InformationsquelleAutor Earl Ferguson | 2015-12-10
  1. 67

    Mise à jour angulaire v4 et @anguleuse/matière 2.0.0-bêta.12

    md préfixe a été changé pour mat

    Importation MatDialogModule au lieu de MdDialogModule

    @angular/material dépend maintenant de @angular/cdk comme un pair de dépendance.

    Récapitulatif: Plunkr

    8 étapes de Dialogue Matériau + Annexe

    Étape 1:
    Installer le paquet

    npm i --save @angular/material @angular/cdk @angular/animations

    Étape 2:
    Configurer systemjs.config.js

    map: {
  ...
  '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
  '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
  '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
  '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
  '@angular/cdk': 'https://unpkg.com/@angular/cdk/bundles/cdk.umd.js',
  '@angular/cdk/a11y': 'https://unpkg.com/@angular/cdk/bundles/cdk-a11y.umd.js',
  '@angular/cdk/bidi': 'https://unpkg.com/@angular/cdk/bundles/cdk-bidi.umd.js',
  '@angular/cdk/coercion': 'https://unpkg.com/@angular/cdk/bundles/cdk-coercion.umd.js',
  '@angular/cdk/collections': 'https://unpkg.com/@angular/cdk/bundles/cdk-collections.umd.js',
  '@angular/cdk/keycodes': 'https://unpkg.com/@angular/cdk/bundles/cdk-keycodes.umd.js',
  '@angular/cdk/observers': 'https://unpkg.com/@angular/cdk/bundles/cdk-observers.umd.js',
  '@angular/cdk/overlay': 'https://unpkg.com/@angular/cdk/bundles/cdk-overlay.umd.js',
  '@angular/cdk/platform': 'https://unpkg.com/@angular/cdk/bundles/cdk-platform.umd.js',
  '@angular/cdk/portal': 'https://unpkg.com/@angular/cdk/bundles/cdk-portal.umd.js',
  '@angular/cdk/rxjs': 'https://unpkg.com/@angular/cdk/bundles/cdk-rxjs.umd.js',
  '@angular/cdk/scrolling': 'https://unpkg.com/@angular/cdk/bundles/cdk-scrolling.umd.js',
  '@angular/cdk/table': 'https://unpkg.com/@angular/cdk/bundles/cdk-table.umd.js',
  '@angular/cdk/stepper': 'https://unpkg.com/@angular/cdk/bundles/cdk-stepper.umd.js',
},

    Étape 3:
    Importation MatDialogModule à votre module

    import { MatDialogModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ 
    BrowserModule,
    BrowserAnimationsModule, <== required
    MatDialogModule <== here
  ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

    Étape 4:
    Créer dialogue souhaité composant:

    @Component({
  selector: 'your-dialog-selector',
  template: `
  <h2>Hi! I am modal dialog!</h2>
  <button mat-raised-button (click)="dialogRef.close()">Close dialog</button>`
})
export class DialogComponent {
  constructor(public dialogRef: MdDialogRef<DialogComponent>) { }
}

    Étape 5:
    Ajouter le composant à partir de l'étape 4 à declarations et entryComponents des tableaux de votre NgModule décorateur:

    @NgModule({
  imports: [ BrowserModule, MatDialogModule ],
  declarations: [ AppComponent, DialogComponent ],
  entryComponents: [ DialogComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

    Étape 6:
    L'utiliser dans votre composant:

    @Component({
  selector: 'my-app',
  template: `<button mat-raised-button (click)="openDialog()">Open dialog</button>`,
})
export class App {

  constructor(public dialog: MatDialog) { }

  openDialog(key) {
    let dialogRef = this.dialog.open(DialogComponent);
  }
}

    Étape 7
    Choisir le thème de votre choix:

    <link href="https://unpkg.com/@angular/material/prebuilt-themes/deeppurple-amber.css" 
  rel="stylesheet">

    D'autres thèmes, vous pouvez trouver ici

    L'étape 8

    Si vous souhaitez transmettre des données à modale puis utilisez la commande suivante (Plunker):

    dialogRef.componentInstance.param1 = "test value";

    Annexe

    Acheminé Dialogue: Plunkr

    Déplaçable Dialogue (Comment puis-je faire un MatDialog déplaçable /Angulaire du Matériel)

    Plunker Exemple

    Voir aussi

    • Merci, cela m'a sauvé beaucoup de temps. J'ai trouvé moi aussi j'ai du ajouter la boîte de dialogue de 'déclarations' dans le NgModule pour qu'il fonctionne (le plunker n'est qu'ainsi). Aussi, vous pouvez envoyer un résultat dans dialogRef.close() et y accéder dans le observables en fonction de l'abonnement. Ce qui est utile pour les boîtes de dialogue de confirmation, etc.
    • Puis-je passer de la valeur de la boîte de Dialogue Composant ainsi?
    • Agarwal le voir, cette question stackoverflow.com/questions/40826073/...
    • Peut-on éviter l'utilisation d'un service de classe?
    • Agarwal plnkr.co/modifier/n185tQbEHg1xGlNCAdxQ?p=preview Voir en ligne this.dialogRef.componentInstance.param1 = "test value";
    • Merci!
    • comment communiquer de dialogue à son parent
    • Bonjour, j'ai suivi toutes les étapes ci-dessus, mais l'obtention de cette erreur. Échec du chargement de la ressource: le serveur a répondu avec un statut de 404 (Non Trouvé) de l'indice.html:25 Erreur: Chercher l'erreur: 404 not Found ZoneDelegate.invokeTask @ zone.js:398 Zone.runTask @ zone.js:165 drainMicroTaskQueue @ zone.js:593
    • est-il possible de toujours utiliser des formes réactives au lieu de #howmuch syntaxe avec cela?
    • aucun des plunkr exemple fonctionne.
    • Merci. Fixe
    • Merci pour la mise à jour.
    • Le Plunkr s'est à nouveau! 🙁 Ceci peut être corrigé en changeant la version de zone.js à 0.8.12: plnkr.co/modifier/EPSmI9TuqcUs5XMQR46H?p=preview
    • Merci. Fixe
    • il fonctionne, mais l'injection de mddialogref fait de ce composant invérifiables
    • Pouvez-vous fournir un plunker qui illustre le problème?
    • Je vais faire séparément la question de savoir pour qui.
    • désolé, je ne suis pas en mesure de plunker il 🙁

    InformationsquelleAutor yurzui