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 { }

如果不将组件添加到entryComponents，则在浏览器控制台中将出现以下错误：

错误错误：没有为ChooseEmojiDialogComponent找到组件工厂。你是否将其添加到@ NgModule.entryComponents吗？

Answer 2

尝试定义宽度

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

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的entryComponents中添加ChooseEmojiDialogComponent

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 { }

角模态弹出窗口不起作用

3 个答案: