0

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

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

未找到 ModalComponent 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？

我已经这样拆分了

导航.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>

导航

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>

模态的.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();
    }
}

我是否错过了触发此错误消息的内容？

4

1 回答 1

1

我猜你错过了在 app.module.ts 文件中添加entryComponents和声明数组。请添加它。材料警报通过以下方式自动打开

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'});
}
于 2019-10-15T09:08:25.927 回答