,可以通过以下步骤实现:
下面是一个示例代码:
<h2>PopUP</h2>
<input type="text" [(ngModel)]="inputValue">
<button (click)="confirm()">Confirm</button>
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';
@Component({
selector: 'app-root',
template: `
<button (click)="openPopUp()">Open PopUP</button>
`,
})
export class AppComponent {
constructor(private dialog: MatDialog) {}
openPopUp(): void {
const dialogRef = this.dialog.open(PopUpComponent);
dialogRef.afterClosed().subscribe((result) => {
console.log('Dialog closed:', result);
// 处理获取到的值
});
}
}
import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-pop-up',
templateUrl: './pop-up.component.html',
})
export class PopUpComponent {
inputValue: string;
constructor(public dialogRef: MatDialogRef<PopUpComponent>) {}
confirm(): void {
this.dialogRef.close(this.inputValue);
}
}
这样,当点击"Open PopUP"按钮时,弹出一个窗口,用户可以在输入框中输入值,并点击确认按钮。确认按钮点击后,弹出窗口关闭,并将输入框的值传递给调用弹出窗口的组件。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云弹性伸缩(Auto Scaling)。腾讯云云服务器提供了可靠、安全、灵活的云计算能力,适用于各种应用场景。腾讯云弹性伸缩可以根据业务负载自动调整云服务器数量,提高应用的可用性和弹性。您可以通过以下链接了解更多信息:
领取专属 10元无门槛券
手把手带您无忧上云