将数据从表传递到Angular 7中的弹出窗口,可以通过以下步骤实现:
下面是一个示例代码:
import { Component, Inject, Input } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-popup',
templateUrl: './popup.component.html',
styleUrls: ['./popup.component.css']
})
export class PopupComponent {
@Input() data: any;
constructor(
public dialogRef: MatDialogRef<PopupComponent>,
@Inject(MAT_DIALOG_DATA) public inputData: any
) {
this.data = inputData;
}
closePopup(): void {
this.dialogRef.close({ result: 'Data returned from popup' });
}
}
<h1>Popup Window</h1>
<p>Data received from table: {{ data }}</p>
<button mat-button (click)="closePopup()">Close</button>
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PopupComponent } from './popup/popup.component';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
tableData: any = 'Data from table';
constructor(public dialog: MatDialog) {}
openPopup(): void {
const dialogRef = this.dialog.open(PopupComponent, {
width: '250px',
data: this.tableData
});
dialogRef.afterClosed().subscribe(result => {
console.log('Data returned from popup:', result);
});
}
}
<button mat-button (click)="openPopup()">Open Popup</button>
这样,当点击表组件中的按钮时,将会打开一个弹出窗口,其中显示从表传递过来的数据。在弹出窗口中,可以进行相应的操作,并通过关闭弹出窗口时返回数据给表组件。
请注意,以上示例中使用了Angular Material中的对话框组件(MatDialog),你可以根据实际需求选择其他弹出窗口组件库或自定义组件来实现相同的功能。
此外,腾讯云提供了一系列云计算相关的产品,例如云服务器、云数据库、云存储等,你可以根据具体需求选择适合的产品。具体产品介绍和文档可以在腾讯云官方网站上找到。
领取专属 10元无门槛券
手把手带您无忧上云