时间戳

首页 > 解决方案 > Angular - 单击图像时，显示带有 3 个单选按钮的对话框

html - Angular - 单击图像时，显示带有 3 个单选按钮的对话框

问题描述

在我的角度应用程序中，我正在尝试添加功能，当我单击 Windows 图像时，应该会出现一个带有 3 个单选按钮的新对话框窗口。我需要帮助才能添加此功能

这是stackblitz链接

链接 - https://stackblitz.com/edit/angular-yvinp9?file=src%2Fapp%2Fapp.component.ts

标签： htmlcssangulardialogradio-button

解决方案

如果您使用的是 Angular 材质。以下是您可以做的事情：

创建一个 DialogContentExampleDialog带有 3 个输入字段的单独组件，并将其添加到以下entry component部分app.module.ts：

 @NgModule({
  imports: [
    ...
  ],
  entryComponents: [DialogContentExample, DialogContentExampleDialog],
  declarations: [...],
  bootstrap: [..],
  providers: [
    ...
  ]
})
export class AppModule {}

然后app.component执行以下操作：

import {MatDialog} from '@angular/material/dialog';
   ...
  constructor(public dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(DialogContentExampleDialog);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
}

工作演示

推荐阅读