Открыть диалоговое окно не работает, Материал Angular 6
Мой .open() в моем диалоговом окне материалов не работает в Angular 6. Я получаю сообщение об ошибке:
ERROR TypeError: Cannot read property 'open' of undefined
Что может пойти не так? Кажется, что импорт MatDialog не распознается
Родительский компонент:
import { Component, OnInit, Input, Inject } from '@angular/core';
import { AuthService } from "../../services/auth.service";
import { SiteService } from "../../services/site.service";
import { MonitoringPointService } from "../../services/monitoring-point.service";
import { Router, ActivatedRoute } from '@angular/router';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { DialogComponent } from '../dialog/dialog.component';
@Component({
selector: 'app-site-settings',
templateUrl: './site-settings.component.html',
styleUrls: ['./site-settings.component.css']})
export class SiteSettingsComponent implements OnInit {
constructor(public dialog: MatDialog, private router: Router, private route: ActivatedRoute, public authService: AuthService, public siteService: SiteService,public monitoringPointService: MonitoringPointService ) { }
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
});
dialogRef.afterClosed().subscribe(result => {
console.info('The dialog was closed');
});
}
ngOnInit() {
...
}
}
Диалоговый компонент:
import { Component, OnInit, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { SiteSettingsComponent } from '../site-settings/site-settings.component';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {
constructor( public dialogRef: MatDialogRef<DialogComponent>) { }
ngOnInit() {}
onNoClick(): void {
this.dialogRef.close();
}
}
Вероятно, нет, означает ли это перечисление его в разделе Bootstrap в app.module? Я получаю сообщение об ошибке, что это невозможно сделать
Я просто просматривал другую тему с аналогичным требованием. Я повторно использую код. stackblitz.com/edit/angular-material-dialog-so55110692
@LaurenAH Если проблема все еще существует, попросите вас поделиться стеком.
@jcuypers Большое спасибо - я воспроизвел эту среду (а также добавил матовый диалог css в свой индексный файл), и это сработало.
@LaurenAH, мой ответ помог тебе?
Извините, но вы разместили то же, что и я, после меня. ладно, это более интересно :-p Я думаю, что у меня мог бы быть принятый ответ на этот вопрос. все равно поделимся. Я в хорошем настроении.
Ответы 3
Вам нужно добавить MatDialogModule в массив импорта в вашем module.ts и CourseDialogComponent в компонент ввода и массив объявлений, например:
import {MatDialogModule} from "@angular/material";
@NgModule({
declarations: [
...
CourseDialogComponent
],
imports: [
...
MatDialogModule
],
providers: [
...
],
bootstrap: [AppComponent],
entryComponents: [CourseDialogComponent]
})
export class AppModule {
}
Вы импортировали матдиалог глобально и добавили его как входной компонент?
Нам нужно импортировать компонент Dialog в 2 места модуля App.
- декларации
- входКомпоненты
После этого не нужно указывать селектор в компоненте диалога, см. пример ниже.
import { Component, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
@Component({
templateUrl: 'dialog.template.html',
})
export class DialogComponent {
constructor(
public dialogRef: MatDialogRef<DialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {}
onNoClick(): void {
this.dialogRef.close();
}
}
Вы импортировали матдиалог глобально и добавили его как входной компонент?