角-点击图像，显示带3个单选按钮的对话框

Question

在我的angular应用程序中，我正在尝试添加功能，当我单击Windows图像时，一个新的对话框窗口将显示3个单选按钮。我需要帮助来添加此功能

这是stackblitz链接

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

Answer 1

如果你用的是有角度的材料。以下是您可以做的事情：

创建一个带有3个输入字段的单独组件DialogContentExampleDialog，并将其添加到应用程序的输入组件部分。单元ts：

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

然后在应用程序中。部件执行以下操作：

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

工作演示