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

Question

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

这里是 stackblitz link

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

Answer 1

如果您正在使用 Angular Material。以下是您可以做的事情：

创建一个包含 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