ngx-bootstrap modal：如何将数据传递到modal component.ts而不是html模板？

Question

我能够收集对象中传递的数据initialState，例如在这段代码中：

\n\n

   const initialState = {\n        titulo: titulo,\n        origen: origen,\n        th1: "N\xc3\xbamero",\n        th2: "Nombres",\n        modalFor: "Locales"\n      };\n      this.bsModalRef = this.modalService.show(ClienteOlocalPopUpComponent, {\n        initialState,\n        backdrop: "static",\n        keyboard: false\n      });\n

\n\n

并在 ClienteOlocalPopUpComponent.html 中插入其属性。

\n\n

但是，如果我希望传递给模态的值const initialState，比方说，通过ngOnInit()ClienteOlocalPopUpComponent.ts \xc2\xbf 的方法在控制台中打印，我该如何实现呢？它在模态的 .ts 文件中无法识别。

\n\n

谢谢。

\n\n

这是启动模式的组件的代码：

\n\n

 openModal(origen, titulo) {\n    this.origen = origen;\n\n    if (origen === "cliente") {\n      const initialState = {\n        titulo: titulo,\n        origen: origen,\n        th1: "RUT",\n        th2: "Nombres",\n        modalFor: "Clientes",\n        rutClientes: this.requestTres.rutCliente,\n        rutOperador: this.requestTres.rutOperador\n      };\n      this.bsModalRef = this.modalService.show(ClienteOlocalPopUpComponent, {\n        initialState,\n        backdrop: "static",\n        keyboard: false\n      });\n    } \n    else if (origen === "local") {\n      if (!this.forma.controls.rutCliente.value) {\n        swal("Seleccione un cliente", "", "warning");\n      } else {\n        // tslint:disable-next-line: max-line-length / crecion del request para locales\n\n        this.documentosService.localRequest.rutCliente = this.requestTres.rutCliente = parseInt(\n          this.forma.controls.rutCliente.value.toString().slice(0, -1),\n          10\n        );\n        this.documentosService.localRequest.rutOperador = this.rutOperador;\n\n        let initialState = {\n          titulo: titulo,\n          origen: origen,\n          th1: "N\xc3\xbamero",\n          th2: "Nombres",\n          modalFor: "Locales",\n          rutClientes: this.requestTres.rutCliente,\n          rutOperador: this.requestTres.rutOperador\n        };\n\n        this.bsModalRef = this.modalService.show(ClienteOlocalPopUpComponent, {\n          initialState,\n          backdrop: "static",\n          keyboard: false\n        });\n      }\n    }\n  }\n

\n\n

这是模态的 .ts：

\n\n

import { DocumentosService } from \'./../../../core/consultaService/documentos.service\';\nimport { Component, OnInit } from \'@angular/core\';\nimport { BsModalRef } from \'ngx-bootstrap/modal\';\nimport { ConsultasService } from \'../../../core/consultaService/consultas.service\';\n\nimport {\n  FormGroup,\n  FormBuilder,\n  Validators,\n  FormControl\n} from \'@angular/forms\';\nimport { ClientesService } from \'../../../core/consultaService/clientes.service\';\n\n\n@Component({\n  selector: \'app-cliente-o-local-pop-up\',\n  templateUrl: \'./clienteOlocalPopUp.component.html\',\n  styleUrls: [\'./clienteOlocalPopUp.component.scss\']\n})\nexport class ClienteOlocalPopUpComponent implements OnInit {\n\n  origen: string;\n  titulo: string;\n  forma: FormGroup;\n  forma2: FormGroup;\n  clientes: any;\n  clientesData: any;\n  cliente: any;\n  cargando = false;\n\n\n  constructor(\n    public bsModalRef: BsModalRef,\n    private clientesService: ClientesService,\n    private consultasService: ConsultasService,\n    private documentosService: DocumentosService\n  ) {\n    this.forma2 = new FormGroup({\n      nombreCliente: new FormControl(),\n      modalFor: new FormControl()\n    });\n  }\n\n  ngOnInit() {\n\n    console.log(this.initialState); // initiaState is highlighted as if does not exist.\n\n  }\n}\n

\n\n

initialState尽管已传入，但仍突出显示，就好像不存在一样。

\n

Answer 1

请注意，initialState您传入的对象 this.modalService.show不会作为组件的属性传递，它只包含要更新的组件的属性，它不会初始化initialState属性

\n\n

如果你显示模态像

\n\n

const initialState = {\n        titulo: titulo,\n        origen: origen,\n        th1: "N\xc3\xbamero",\n        th2: "Nombres",\n        modalFor: "Locales"\n      };\n      this.bsModalRef = this.modalService.show(ModalComponent , {\n        initialState,\n        backdrop: "static",\n        keyboard: false\n      });\n

\n\n

那么在你的模态组件中初始化的属性是titulo、origen、th1和。如果您想要在该组件中初始化属性，那么您必须执行类似的操作th2modalForinitialState

\n\n

const initialState = {\n            titulo: titulo,\n            origen: origen,\n            th1: "N\xc3\xbamero",\n            th2: "Nombres",\n            modalFor: "Locales"\n          };\n          this.bsModalRef = this.modalService.show(ModalComponent , {\n            initialState : {initialState},\n            backdrop: "static",\n            keyboard: false\n          });\n

\n\n

这就是为什么当你说它console.log(this.initialState);给出未定义时，它应该是console.log(this.titulo);或你决定的任何其他属性

\n