typescript 如何在Angular 模式中导航到模态组件?

wtzytmuj  于 2022-12-24  发布在  TypeScript
关注(0)|答案(1)|浏览(109)

我的SearchComponent上有一个“编辑”按钮,可通过 navigateByUrl('url-link') 将用户发送到我的EditFormComponent页面,但我希望将用户保留在SearchComponent页面上,并打开一个内部包含EditFormComponentModal组件。
我正在使用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)        
    }
dced5bon

dced5bon1#

如果你使用的是模态组件,你就不再需要navigateByUrl了,只需在单击编辑按钮时调用openModal即可。
为了确保模态正确打开,您还可以确保DistributionSearchModalComponent被注入到app. module. ts内的entryComponents中。
此外,在modal. component. ts中,您正在将dataForm初始化为this.data,但是对话框数据还没有在构造函数中示例化。
如果可能需要任何额外的见解,请告诉我!

相关问题