Я работаю над приложением POC, и я пытаюсь работать с компонентом MdDialog. Есть ли у кого-нибудь рабочий пример того, как перейти к открытому методу MdDialog?
Ануляр 2.0: https://github.com/angular/angular
Angular 2 Материал: https://github.com/angular/material2
md префикс был изменен на mat
Импортировать MatDialogModule вместо MdDialogModule
@angular/material теперь зависит от @angular/cdk как равноправной зависимости.
Recap: Plunkr
8 шагов к диалоговому материалу + Приложение
Шаг 1: Установить пакет
npm i --save @angular/material @angular/cdk @angular/animations
Шаг 2:
Настроить 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',
},
Шаг 3:
Импорт MatDialogModule в ваш модуль
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 {}
Шаг 4: Создайте необходимый компонент диалога, например:
@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>) { }
}
Шаг 5:
Добавьте компонент с шага 4 в declarations и entryComponents массивы вашего декоратора NgModule:
@NgModule({
imports: [ BrowserModule, MatDialogModule ],
declarations: [ AppComponent, DialogComponent ],
entryComponents: [ DialogComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
Шаг 6: Используйте его в своем компоненте:
@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);
}
}
Шаг 7 Выберите нужную тему:
<link href="#" onclick="location.href='https://unpkg.com/@angular/material/prebuilt-themes/deeppurple-amber.css'; return false;"
rel="stylesheet">
Другие темы вы можете найти здесь
Шаг 8
Если вы хотите передать данные в модальные, используйте следующие (Plunker):
dialogRef.componentInstance.param1 = "test value";
Приложение
Маршрутизированный диалог: Plunkr
См. также