Mat Dialog 未作为弹出窗口打开

Question

我为 mat-dialog 创建了单独的 HTML 文件。 material 是否导入，但对话框未以弹出窗口形式打开，而是在页面底部打开。

这是对话框 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 { 
  
}

Answer 1

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

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

Make sure to restart ng serve to reload the angular.json file.

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

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

Mat Dialog 未作为弹出窗口打开

Mat Dialog is not opening up as pop-up

node-modules

angular-material

angular