Ngx-bootstrap 模态：如何将数据传递给模态 component.ts 而不是 html 模板？

Question

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

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

并在 ClienteOlocalPopUpComponent.html.

中插入其属性

但是，如果我希望在 const initialState 中传递给模态的值，比方说，在 ClienteOlocalPopUpComponent.ts 的 ngOnInit() 方法中打印在控制台中，我怎样才能实现那个？在模态的.ts文件中无法识别。

谢谢。

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

 openModal(origen, titulo) {
    this.origen = origen;

    if (origen === "cliente") {
      const initialState = {
        titulo: titulo,
        origen: origen,
        th1: "RUT",
        th2: "Nombres",
        modalFor: "Clientes",
        rutClientes: this.requestTres.rutCliente,
        rutOperador: this.requestTres.rutOperador
      };
      this.bsModalRef = this.modalService.show(ClienteOlocalPopUpComponent, {
        initialState,
        backdrop: "static",
        keyboard: false
      });
    } 
    else if (origen === "local") {
      if (!this.forma.controls.rutCliente.value) {
        swal("Seleccione un cliente", "", "warning");
      } else {
        // tslint:disable-next-line: max-line-length / crecion del request para locales

        this.documentosService.localRequest.rutCliente = this.requestTres.rutCliente = parseInt(
          this.forma.controls.rutCliente.value.toString().slice(0, -1),
          10
        );
        this.documentosService.localRequest.rutOperador = this.rutOperador;

        let initialState = {
          titulo: titulo,
          origen: origen,
          th1: "Número",
          th2: "Nombres",
          modalFor: "Locales",
          rutClientes: this.requestTres.rutCliente,
          rutOperador: this.requestTres.rutOperador
        };

        this.bsModalRef = this.modalService.show(ClienteOlocalPopUpComponent, {
          initialState,
          backdrop: "static",
          keyboard: false
        });
      }
    }
  }

这是模态的.ts:

import { DocumentosService } from './../../../core/consultaService/documentos.service';
import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { ConsultasService } from '../../../core/consultaService/consultas.service';

import {
  FormGroup,
  FormBuilder,
  Validators,
  FormControl
} from '@angular/forms';
import { ClientesService } from '../../../core/consultaService/clientes.service';


@Component({
  selector: 'app-cliente-o-local-pop-up',
  templateUrl: './clienteOlocalPopUp.component.html',
  styleUrls: ['./clienteOlocalPopUp.component.scss']
})
export class ClienteOlocalPopUpComponent implements OnInit {

  origen: string;
  titulo: string;
  forma: FormGroup;
  forma2: FormGroup;
  clientes: any;
  clientesData: any;
  cliente: any;
  cargando = false;


  constructor(
    public bsModalRef: BsModalRef,
    private clientesService: ClientesService,
    private consultasService: ConsultasService,
    private documentosService: DocumentosService
  ) {
    this.forma2 = new FormGroup({
      nombreCliente: new FormControl(),
      modalFor: new FormControl()
    });
  }

  ngOnInit() {

    console.log(this.initialState); // initiaState is highlighted as if does not exist.

  }
}

initialState被高亮显示，尽管它被传入了，就好像它不存在一样。

Answer 1

请注意，您在 this.modalService.show 中传递的 initialState 对象不会作为属性传递给您的组件，它仅包含您的组件的属性已更新，它不会初始化 initialState 属性

如果你显示模态

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

那么在模态组件中初始化的属性是 titulo、origen、th1、th2 和 modalFor。如果你想在那个组件中初始化一个 initialState 属性那么你必须做类似

的事情

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

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

Ngx-bootstrap 模态：如何将数据传递给模态 component.ts 而不是 html 模板？

Ngx-bootstrap modal: how to pass data to the modal component.ts instead of to the html template?

ngx-modal

ngx-bootstrap

angular