在Angular 4应用程序的模式对话框上显示数据,可以通过以下步骤实现:
以下是一个示例代码:
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor(public dialog: MatDialog) { }
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
data: { message: 'Hello, World!' }
});
}
}
<h2>Data from Parent Component:</h2>
<p>{{ data.message }}</p>
这样,当在父组件中调用openDialog方法时,会打开一个模式对话框,并显示传递的数据"Hello, World!"。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云弹性伸缩(AS)。
领取专属 10元无门槛券
手把手带您无忧上云