Arbeitsbeispiel für Angular 2.0 Material MdDialog mit Angular 2.0

Arbeite ich an einem POC-app, und ich versuche, das MdDialog Komponente arbeiten. Hat jemand ein funktionierendes Beispiel, was passieren, um die MdDialog offene Methode?

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

Winkel-2 Material:
https://github.com/angular/material2

InformationsquelleAutor der Frage Earl Ferguson | 2015-12-10

  1. 62

    Update zu eckig v4 und @eckig/material 2.0.0-beta.12

    md Präfix wurde geändert, um mat

    Import MatDialogModule statt MdDialogModule

    @angular/material hängt nun davon ab @angular/cdk als peer-Abhängigkeit.

    Rückblick: Plunkr

    8 Schritte zur Material-Dialog + Anhang

    Schritt 1:
    Paket installieren

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

    Schritt 2:
    Konfigurieren 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',
},

    Schritt 3:
    Import MatDialogModule zu Ihrem Modul

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

    Schritt 4:
    Erstellen die gewünschten dialog-Komponente wie:

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

    Schritt 5:
    Fügen Sie die Komponente aus Schritt 4, um declarations und entryComponents arrays von Ihr NgModule decorator:

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

    Schritt 6:
    Verwenden Sie es in Ihrer Komponente:

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

    Schritt 7
    Wählen Sie die gewünschte Thema:

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

    Anderen Themen finden Sie hier

    Schritt 8

    Wenn Sie wollen, um die übergabe von Daten an modalen verwenden Sie dann die folgenden (Plunker):

    dialogRef.componentInstance.param1 = "test value";

    Anhang

    Weitergeleitet Dialog: Plunkr

    Ziehbar Dialog (Wie kann ich eine MatDialog ziehbar /Winkel Material)

    Plunker Beispiel

    Siehe auch

    InformationsquelleAutor der Antwort yurzui

Schreibe einen Kommentar