垫子对话框没有作为弹出窗口打开答案

【问题标题】：Mat Dialog is not opening up as pop-up垫子对话框没有作为弹出窗口打开
【发布时间】：2021-10-17 08:59:21
【问题描述】：

我为 mat-dialog 创建了单独的 HTML 文件。是否导入了材料，但对话框没有作为弹出窗口打开，而是在页面底部打开。

这是一个对话框 html，有一个关闭对话框的按钮。

assignRMDialog.html

  <h2 mat-dialog-title>Assign RM</h2>
    <mat-dialog-content>
    <hr>
        <button class="btn-primary" (click)="onNoClick()" >Close</button>
      </mat-dialog-content>

这是一个 html 页面，其按钮名称为“分配 RM”以打开对话框弹出窗口。

walkin.component.html

    <button mat-button class="btn-primary" (click)="assignRM()">Assign RM</button>

这是一个.ts文件，包含对话框和主页的功能和声明。

walkin.component.ts

    import { Component, OnInit, ViewChild,Inject,  } from '@angular/core';
    import { MatDialog ,MatDialogRef,MAT_DIALOG_DATA} from '@angular/material/dialog';
    import { CommonService } from 'src/app/core/services/common.service';
    
    export interface NewAssignWalkinDialogData{
      rmOptionList:any;
    }
    @Component({
      selector: 'app-walkin',
      templateUrl: './walkin.component.html',
      styleUrls: ['./walkin.component.css']
    })
    export class WalkinComponent implements OnInit {
    
      constructor(private commonServices:CommonService,private dialog:MatDialog) {     
       }
      ngOnInit(): void {
      }
     
      assignRM():void{
        const dialogRef=this.dialog.open(AssignNewWalkinDialog,{
          width: '250px',
          height: '300px',
          data:{rmOptionList:''}
        });
      }
    }
    @Component({
      selector: 'assignRMDialogBox',
      templateUrl: 'assignRMDialogBox.html',
    })
    export class AssignNewWalkinDialog{
      constructor(
        public dialogRef: MatDialogRef<AssignNewWalkinDialog>,
        @Inject(MAT_DIALOG_DATA) public data: NewAssignWalkinDialogData,private walkinService:WalkinService) {
    }
    
    
    onNoClick(): void {
      this.dialogRef.close();
    }
    
    }

我还在 app.module.ts 中声明了这个对话框组件，并将其定义为入口组件。 app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ModuleImport } from 'src/assets/moduleImport';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ToastrModule } from 'ngx-toastr';
import { NgxSpinnerModule } from "ngx-spinner";
import { FormsModule } from '@angular/forms'; 
import { HttpClientModule } from '@angular/common/http';
import { GtagModule } from 'angular-gtag';
import { CommonService } from './core/services/common.service';
import { RouterModule } from '@angular/router';
import { EnquiryComponent } from './dashboard/enquiry/enquiry.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WalkinComponent } from './dashboard/walkin/walkin.component';
import { AssignNewWalkinDialog } from './dashboard/walkin/walkin.component';

@NgModule({
  declarations: [
    AppComponent,
    WalkinComponent,
    AssignNewWalkinDialog
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ModuleImport,
    ToastrModule.forRoot({
      positionClass:'toast-top-center'
    }),
    NgxSpinnerModule,
    FormsModule,
    HttpClientModule,
    GtagModule,
    RouterModule,
    BrowserAnimationsModule
  ],
  entryComponents:[AssignNewWalkinDialog],
  providers: [CommonService],
  bootstrap: [AppComponent]
})
export class AppModule { 
  
}

【问题讨论】：

能否尝试在app.module 中导入MatDialogModule 并将其添加到imports 模块配置数组中？
@MilanTenk ModuleImport 拥有所有材质模块的导入。所以它已经完成了。

标签： angular angular-material node-modules

【解决方案1】：

第一种方式：如果尚未添加，请尝试在angular.json 文件中添加以下路径：

./node_modules/@angular/material/prebuilt-themes/indigo-pink.css

确保重新启动ng serve 以重新加载angular.json 文件。

第二种方法：如果尚未导入，请尝试在style.css文件中导入以下路径：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

【讨论】：