新手如何涨1000粉_站长之家seo_口碑营销5t_近期新闻热点

说明：
angular实现dialog弹窗
效果图：

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

<button mat-button (click)="openDialog()">Open dialog</button>

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

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

<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

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