Angular 角度对话框参数
我想实现一个对话框,其中有一些API的数据。在实现该对话框之前,API是由参数id通过routerLink调用的,但由于我选择了dialog,没有相同的参数,因此,我无法将id传递给dialog进行API调用 我试图用dialog create函数传递id,但这也不能满足要求 HTML:Angular 角度对话框参数,angular,angular-material,Angular,Angular Material,我想实现一个对话框,其中有一些API的数据。在实现该对话框之前,API是由参数id通过routerLink调用的,但由于我选择了dialog,没有相同的参数,因此,我无法将id传递给dialog进行API调用 我试图用dialog create函数传递id,但这也不能满足要求 HTML: <button color="primary" matTooltip="Audit Order" (click)="onCreate(orders.orderId)" style="background-
<button color="primary" matTooltip="Audit Order" (click)="onCreate(orders.orderId)" style="background-color:rgba(251, 230, 221, 1); border-radius: 5px;">
AUDIT
</button>
import { MatDialog, MatDialogConfig } from '@angular/material';
import { AuditPopupComponent } from '../audit-popup/audit-popup.component';
@Component({
selector: 'kt-audit',
templateUrl: './audit.component.html',
styleUrls: ['./audit.component.scss']
})
export class AuditComponent implements OnInit {
constructor(private dailog: MatDialog) {}
ngOnInit() {}
onCreate(orderId){
this.route.params.subscribe(params => {
this._Order.viewOrders(orderId).subscribe(res => {
this.orderDetails = res.data;
});
});
const dailogConfig = new MatDialogConfig();
// dailogConfig.disableClose = true;
dailogConfig.autoFocus = true;
dailogConfig.width = "50%";
this.dailog.open(AuditPopupComponent, dailogConfig);
}
}
ngOnInit() {
this.route.params.subscribe(params => {
this.ps.viewOrders(params['id']).subscribe(res => {
this.ordersView = res.data;
});
});
}
子组件TS:
<button color="primary" matTooltip="Audit Order" (click)="onCreate(orders.orderId)" style="background-color:rgba(251, 230, 221, 1); border-radius: 5px;">
AUDIT
</button>
import { MatDialog, MatDialogConfig } from '@angular/material';
import { AuditPopupComponent } from '../audit-popup/audit-popup.component';
@Component({
selector: 'kt-audit',
templateUrl: './audit.component.html',
styleUrls: ['./audit.component.scss']
})
export class AuditComponent implements OnInit {
constructor(private dailog: MatDialog) {}
ngOnInit() {}
onCreate(orderId){
this.route.params.subscribe(params => {
this._Order.viewOrders(orderId).subscribe(res => {
this.orderDetails = res.data;
});
});
const dailogConfig = new MatDialogConfig();
// dailogConfig.disableClose = true;
dailogConfig.autoFocus = true;
dailogConfig.width = "50%";
this.dailog.open(AuditPopupComponent, dailogConfig);
}
}
ngOnInit() {
this.route.params.subscribe(params => {
this.ps.viewOrders(params['id']).subscribe(res => {
this.ordersView = res.data;
});
});
}
这可能不是对您的解决方案的提示,但由于较大项目的维护问题,请尽量避免嵌套订阅
此外,您还必须担心破坏订阅,只要您不在角度服务中使用订阅您只需通过对话框选项将数据传递到对话框: TS: 对话框:
import { MAT_DIALOG_DATA } from '@angular/material';
import { Inject } from '@angular/core';
@Component({
selector: 'dialog-data-example-dialog',
templateUrl: 'dialog-data-example-dialog.html',
})
export class DialogDataExampleDialog {
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
ngOnInit() {
this.ordersView = this.data;
}
}
请看这里: