我的SearchComponent上有一个“编辑”按钮,可通过 navigateByUrl('url-link') 将用户发送到我的EditFormComponent页面,但我希望将用户保留在SearchComponent页面上,并打开一个内部包含EditFormComponent的Modal组件。
我正在使用Angular Material Design创建Modal组件,然后我在其中调用了EditFormComponent,但是Modal弹出时没有从SearchComponent加载数据,并且“background”加载了EditFormComponent页面,使Modal组件为空。以下是我的代码:搜索.组件.TS
export class DistributionFormComponent implements OnInit {
@Input() dataModal: DistributionSearchModalComponent;
ngOnInit() {
console.log('data coming from modal', this.dataModal);
}
editDistribution(id) {
this.router.navigateByUrl(`/registry/basic/distribution/edit/${id}`);
}
openModal(id) {
this.dialog.open(DistributionSearchModalComponent, {
width: '660px',
height: '760px',
data: {
id: id.id,
address: id.address,
service: id.service,
}
})
}
模态.组件.HTML
<div fxLayout="row wrap" fxLayout.lt-sm="column" class="pt-1 pr-1 pl-1">
<div fxFlex="95" fxLayoutAlign="start">
<h1 matDialogTitle>Edit</h1>
</div>
<div fxFlex="5" fxLayoutAlign="end">
</div>
</div>
<div fxLayout="row wrap" fxLayout.lt-sm="column" class="pt-1 pr-1 pl-1">
<op-distribution-form [dataModal]="dataForm"></op-distribution-form>
</div>
模态组件TS
export class DistributionSearchModalComponent implements OnInit {
dataForm = this.data;
providerForm: FormGroup;
distributionForm: FormGroup;
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<DistributionSearchModalComponent>,
public confirmService: AppConfirmService,
public fb: FormBuilder,
) { }
ngOnInit(): void {
console.log('MODAL DATA ', this.data);
}
表格.组件.TS
export class DistributionFormComponent implements OnInit {
@Input() dataModal: DistributionSearchModalComponent;
objModal;
searchId;
constructor(
private dialog: MatDialog,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
) {}
ngOnInit() {
this.buildItemForm();
this.distributionForm.controls.distribuicao.valueChanges.subscribe(value => {
this.itemsSubject$.next(value);
});
this.hasPermission = this.permissionsServices.hasPermission('distribution');
console.log('data coming from modal ', this.dataModal)
this.objModal = this.dataModal;
console.log('modal id ', this.objModal.id)
}
1条答案
按热度按时间dced5bon1#
如果你使用的是模态组件,你就不再需要navigateByUrl了,只需在单击编辑按钮时调用openModal即可。
为了确保模态正确打开,您还可以确保DistributionSearchModalComponent被注入到app. module. ts内的entryComponents中。
此外,在modal. component. ts中,您正在将dataForm初始化为this.data,但是对话框数据还没有在构造函数中示例化。
如果可能需要任何额外的见解,请告诉我!