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

相关推荐
天天鸭24 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆1 小时前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
前端 贾公子1 小时前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆1 小时前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js