Диалог не отображается должным образом при нажатии

Question

Я тестирую выскакивание модального диалогового окна из этого руководства из https://github.com/gopinav/Angular-Material-Tutorial/tree/master/material-demo/src/app на основе диалогового примера и диалоговой папки..

однако при запуске его для тестирования на моем локальном хосте я получаю эту ошибку

Фабрика компонентов для ModalComponent не найдена. Вы добавляли его в @NgModule.entryComponents?

Я разделил это вот так

nav.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex container">
        <div class="navbar-brand redirect" routerLink="">Gigworks Authentication</div>
        <div class="d-flex ml-auto">
            <div class="nav-link redirect" *ngIf="isLoggedOut$ | async" (click)="openModal()">Login</div>
            <div *ngIf="isLoggedIn$ | async" (click)="this.toggle()">
                <div class="nav-link redirect" *ngIf="(user$ | async) as user" routerLink="dashboard">
                    {{(user.username)}}</div>
            </div>
            <div class="nav-link redirect" (click)="logout()" *ngIf="isLoggedIn$ | async">Logout</div>
        </div>
    </div>
</nav>

nav.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import { AngularFireAuth } from "@angular/fire/auth";
import { MatDialog } from '@angular/material';
import { ModalComponent } from '../../modal/modal.component';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor(
    public afAuth: AngularFireAuth,
    public dialog: MatDialog
    ) { }

  ...

  openModal() {
    let dialogRef = this.dialog.open(ModalComponent)
    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  };
}

А для modal.html

<h2 mat-dialog-title>Welcome Back</h2>
<mat-dialog-content>Lorem Ipsum</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close="true">Keep me logged in</button>
  <button mat-button mat-dialog-close="false">Log out</button>
</mat-dialog-actions>

modal.ts

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ModalService {
    private modals: any[] = [];

    open(id: string) {
        // open modal specified by id
        let modal: any = this.modals.filter(x => x.id === id)[0];
        modal.open();
    }

    close(id: string) {
        // close modal specified by id
        let modal: any = this.modals.filter(x => x.id === id)[0];
        modal.close();
    }
}

Мог ли я пропустить что-то, что вызывает это сообщение об ошибке?

Answer 1

Думаю, вы пропустили добавление массивов entryComponents и деклараций в файл app.module.ts. Пожалуйста, добавьте это. Материальное предупреждение открывается автоматически

let dialogRef = this.dialog.open(ModalComponent)

вам не нужно снова открывать это внутри компонента.

import {ModalService} from './Components/ModalService.component';
declarations: [
.
.
.,
ModalService
],
entryComponents: [
.
.
.,
ModalService
]

Также, пожалуйста, не сохраняйте атрибут mat-dialog-close в кнопках, просто добавьте функции щелчка, так как вам нужно выполнить некоторую операцию до закрытия модального окна. Ты можешь это сделать.

<mat-dialog-actions>
   <button mat-button (click)="keepLoggedIn()">Keep me logged in</button>
   <button mat-button (click)="logout()">Log out</button>
</mat-dialog-actions>

logout() {
  this.dialogRef.close({data:[], status: 'success'});
}

keepLoggedIn() {
  this.dialogRef.close({data:[], status: 'success'});
}