angular实现dialog弹窗

说明:

angular实现dialog弹窗

效果图:

step1:E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.html

xml 复制代码
<button mat-button (click)="openDialog()">Open dialog</button>

step2:E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.ts

typescript 复制代码
import {Component, inject} from '@angular/core';
import {MatButton, MatButtonModule} from '@angular/material/button';
import {MatDialog, MatDialogModule} from '@angular/material/dialog';
import {DialogContentExampleDialog} from './DialogContentExampleDialog';


@Component({
  selector: 'app-apple',
  standalone: true,
  imports: [
    MatButton, MatButtonModule, MatDialogModule
  ],
  templateUrl: './apple.component.html',
  styleUrl: './apple.component.css'
})
export class AppleComponent {
  readonly dialog = inject(MatDialog);


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

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


}

step3:E:\projectgood\ajnine\untitled4\src\app\apple\dialog-content-example-dialog.html

xml 复制代码
<h2 mat-dialog-title>Install Angular</h2>
<mat-dialog-content class="mat-typography">
  <h3>Develop across all platforms</h3>
  <p>{{ cancelString }}</p>
  <p>{{ sureString }}</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="cancelString">Cancel</button>
  <button mat-button [mat-dialog-close]="sureString">Install</button>
</mat-dialog-actions>

step4:E:\projectgood\ajnine\untitled4\src\app\apple\DialogContentExampleDialog.ts

typescript 复制代码
import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
import {MatDialogModule} from '@angular/material/dialog';
import {MatButtonModule} from '@angular/material/button';

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'dialog-content-example-dialog.html',
  standalone: true,
  imports: [MatDialogModule, MatButtonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DialogContentExampleDialog implements OnInit{
  cancelString :string=''
  sureString :string=''


  ngOnInit(): void {
    this.cancelString="鲨鱼哟"
    this.sureString="昊昊超体"
  }

}

end

相关推荐
轻语呢喃1 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想14 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷15 分钟前
TypeScript-webpack
javascript·webpack·typescript
Rockson19 分钟前
使用Ruby接入实时行情API教程
javascript·python
前端小巷子2 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
gnip3 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员4 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘4 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js