如何在Angular中导航到一个模态组件?

Question

我有一个编辑按钮在我的搜索组件将用户发送到myEditFormComponent页面通过navigateByUrl('url-link')，但我想保持用户在SearchComponent打开ModalEditFormComponent里面。

我使用Angular Material Design来创建模态组件，然后我调用EditFormComponent但是Modal没有从SearchComponent加载数据就弹出了'background'加载EditFormComponent页面，将Modal组件保留为空。这是我的代码:SEARCH.COMPONENT.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,
}
})
}

MODAL.COMPONENT.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>

MODAL.COMPONENT.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);
}

FORM.COMPONENT.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)        
}

Answer 1

如果你使用的是模态组件，你就不再需要navigateByUrl了。只需调用编辑按钮的openModal onClick。

为了确保模态正确打开，你还可以确保DistributionSearchModalComponent被注入到你的app.module.ts中的entryComponents中。

另外，在你的modal.component.ts中。您正在将dataForm初始化为这个。数据，但是对话框数据还没有在构造函数中实例化。

如果需要任何额外的见解，请告诉我!