Открытый диалог не работает, Материал угловой 6 - PullRequest
Новая
       34

Открытый диалог не работает, Материал угловой 6

0 голосов
/ 12 марта 2019

Мой .open () в диалоге материалов не работает в Angular 6. Я получаю ошибку:

ОШИБКА TypeError: Невозможно прочитать свойство 'open' из неопределенного

Что может быть не так? Кажется, что импорт 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.log('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();
  }

}

Ответы [ 3 ]

1 голос
/ 12 марта 2019

Вам необходимо добавить MatDialogModule в массив импорта в вашем файле module.ts и CourseDialogComponent в компоненте ввода и массиве объявлений, например: 

import {MatDialogModule} from "@angular/material";
@NgModule({
declarations: [
 ...
 CourseDialogComponent
],
imports: [
 ...
 MatDialogModule
],
providers: [
 ...
],
bootstrap: [AppComponent],
entryComponents: [CourseDialogComponent]
})

export class AppModule {
}
0 голосов
/ 10 июня 2019

Нам нужно импортировать наш компонент Dialog в 2 местах модуля App

  1. декларации
  2. entryComponents

После этого не нужно указывать селектор в компоненте диалога, см. Пример ниже. 

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();
  }
}
0 голосов
/ 12 марта 2019

импортировали ли вы matdialog глобально и добавили ли вы его в качестве входного компонента?

...