Angular 模态弹出窗口不工作

Question

我正在尝试在 Angular 中创建一个简单的模式弹出窗口。我已经在 app.module.ts 中导入了所有内容，但我似乎无法在我的代码中找到错误。我所看到的只是本地主机上的一个空白屏幕。

下面是我的 app.component.html 文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
  <h1>Popup!</h1>
  <button (click) = "openDialog()" mat-raised-button class="btn btn-default">Click me!</button>
</div>
<app-choose-emoji-dialog></app-choose-emoji-dialog>

下面是我的模态组件文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<h1 mat-dialog-title class="text-primary">This is dialog title!</h1>
<mat-dialog-content>This is the content of dialog!</mat-dialog-content>
<mat-dialog-actions>
  <button md-raised-button class="btn btn-primary" mat-dialog-close>Close Button!</button>
</mat-dialog-actions>

下面是app.component.ts文件：

import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';
import { MatDialog } from '@angular/material';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public dialog: MatDialog) {
  }
  openDialog () {
    this.dialog.open(ChooseEmojiDialogComponent);
  }
}

app.module.ts 文件:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';
import {MatDialogModule, MatButtonModule, MatCardModule, MatMenuModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent,
    ChooseEmojiDialogComponent
  ],
  imports: [
    BrowserModule, MatButtonModule, BrowserAnimationsModule, MatCardModule, MatMenuModule, MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

尝试定义宽度

export class AppComponent {
  constructor(public dialog: MatDialog) {    
  }
  openDialog () {
    this.dialog.open(ChooseEmojiDialogComponent, { width: '300px' });
  }
}

Answer 2

将您的 ChooseEmojiDialogComponent 添加到 app.module.ts 文件中的 entryComponents 数组中

@NgModule({
  declarations: [
    AppComponent,
    ChooseEmojiDialogComponent
  ],
  imports: [
    BrowserModule, MatButtonModule, BrowserAnimationsModule, MatCardModule, MatMenuModule, MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ChooseEmojiDialogComponent]
})
export class AppModule { }

如果您不将您的组件添加到 entryComponents，那么您将在浏览器控制台中收到以下错误：

ERROR Error: No component factory found for ChooseEmojiDialogComponent. Did you add it to @NgModule.entryComponents?

Answer 3

以上代码需要修改

在 'app.component.html' 中删除 ChooseEmojiDialogComponent 的选择器

<div>
  <h1>Popup!</h1>
  <button (click) = "openDialog()" mat-raised-button class="btn btn-default">Click me!</button>
</div>

在 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';
import { MatDialogModule, MatButtonModule, MatCardModule, MatMenuModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent,
    ChooseEmojiDialogComponent
  ],
  imports: [
    BrowserModule, MatButtonModule, BrowserAnimationsModule, MatCardModule, MatMenuModule, MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ChooseEmojiDialogComponent]
})
export class AppModule { }

Angular 模态弹出窗口不工作

Angular modal popup not working

modal-dialog

popup

typescript

angular