我正在創建 Angular Material 對話框彈出視窗，而不是彈出組件顯示在底部。
組件.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';
組件.html
<button mat-raised-button (click)="openDialog()">Pick one</button>
應用程式模塊
..
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]
})
結果組件顯示在頁面底部而不是彈出視窗中：
uj5u.com熱心網友回復：
確保在 angular.json 中匯入 Angular 材質樣式
"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": []
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/467695.html
上一篇：如何在Angular11中基于http請求狀態碼獲取布林值
下一篇：如何知道導航是否取消？