角材质对话框弹出显示在页面底部而不是弹出式。
角材质对话框弹出显示在页面底部而不是弹出式。
提问于 2022-04-29 10:43:48
我正在创建棱角材质对话框弹出，但不是弹出组件显示在底部。
Component.ts
constructor(public dialog: MatDialog) { }
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px'
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}在进口方面：
import { MatDialog } from '@angular/material/dialog';Component.html
<button mat-raised-button (click)="openDialog()">Pick one</button>app.module
..
import {MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS} from '@angular/material/dialog';
import { DialogComponentComponent } from './dialog-component/dialog-component.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
Component,
DialogComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatButtonModule,
MatDialogModule,
BrowserAnimationsModule
],
providers: [{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}],
bootstrap: [AppComponent],
entryComponents: [DialogComponentComponent]
})结果该组件显示在页面底部，而不是弹出：
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-29 12:03:09
确保您在angular.json中导入了角材质样式
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/your-project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets"],
// make sure you import this style from angular material
"styles": ["./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css","src/styles.scss"],
"scripts": []
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72056710
复制相关文章
相似问题
腾讯云开发者
