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

【问题标题】：Angular - On click image, display Dialog Box with 3 Radio buttonsAngular - 单击图像时，显示带有 3 个单选按钮的对话框
【发布时间】：2021-05-03 18:06:37
【问题描述】：

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

这里是stackblitz链接

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

【问题讨论】：

您使用的是哪个 UI 库？
尝试使用Angular材料或基本Angular实现

标签： html css angular dialog radio-button

【解决方案1】：

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

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

 @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}`);
    });
  }
}

Working demo

【讨论】：

我是否需要 material-module.ts 中提到的所有导入？我可以直接在 main app.module 中导入吗？
不，你应该只导入你需要的包。
好吧，为什么要创建 2 个 html 文件？我们可以将它们合二为一吗？
理想情况下，您应该创建单独的组件以维护关注点分离原则。
好的，我明白你的意思，但是如果我想要一个 html 文件，那么我应该如何修改 openDialog() 方法？