角度模态弹出窗口不起作用

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

在 app.module.ts 文件中的 entryComponents 数组中添加您的 ChooseEmojiDialogComponent。

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

如果您没有将组件添加到条目组件，那么您将在浏览器控制台中收到以下错误：

错误

错误：找不到选择表情符号对话框组件的组件工厂。你 将其添加到@NgModule.entryComponents？

Answer 2

尝试定义宽度

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

Answer 3

需要在上面的代码中进行更改

1. 在"app.component.html"中删除选择表情符号对话框组件的选择器

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

2. 在 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 { }