Question

我是新手，只是想弹出一个对话框，但不是模态窗口。

这是我的一些代码

在“ app.module.ts”内部

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
import { MatDialogModule } from "@angular/material/dialog";
import { MatCardModule } from "@angular/material";
import { MatButtonModule } from "@angular/material";

@NgModule({
  declarations: [
    QuadMergeSearchFormComponent,
    QuadMergeSearchResultsDialogComponent
  ],
  entryComponents: [
    QuadMergeSearchResultsDialogComponent
  ],
  imports: [
    BrowserModule,
    MembersideRoutingModule,
    FormsModule,
    HttpClientModule,
    MatDialogModule,
    MatCardModule,
    MatButtonModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

“ quad-merge-search-form.component”内部

constructor(private dialog: MatDialog) { }

onSubmit(): void {
    let dialogRef = this.dialog.open(QuadMergeSearchResultsDialogComponent, 
    {
        width: '600px',
        height: '400px'
    });
}

我需要添加任何东西到quad-merge-search-form.component.html吗？

“ quad-merge-search-results-dialog.component”内部

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-quad-merge-search-results-dialog',
  templateUrl: './quad-merge-search-results-dialog.component.html',
  styleUrls: ['./quad-merge-search-results-dialog.component.scss']
})
export class QuadMergeSearchResultsDialogComponent implements OnInit {

constructor() { }

ngOnInit() {
}

和

<p>
  quad-merge-search-results-dialog works!
</p>

在'app.component.html'内部（这里需要输入任何内容吗？）

<site-header></site-header>
<div class="site-content">
    <router-outlet></router-outlet>
</div>
<site-footer></site-footer>

当我运行页面并单击按钮时，对话框将显示在'<site-footer>'标签下面，但是。

Thx jonpfl

Answer 1

添加此行

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

到您应用中的angular.json文件。

角对话框未作为模式窗口打开

1 个答案: