单击时对话无法正确显示

Question

我正在测试从 https://github.com/gopinav/Angular-Material-Tutorial/tree/master/material-demo/src/app 的教程中弹出对话框模式基于对话框示例和对话框文件夹。

但是当运行它在我的本地主机上测试时，我收到了这个错误

No component factory found for ModalComponent. Did you add it to @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

我猜你错过了在 app.module.ts 文件中添加 entryComponents 和 declarations 数组。请添加它。 material 警报由

自动打开

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

单击时对话无法正确显示

Dialogue not displaying properly when clicked

typescript

angular-material

angular

material-dialog