Ngx-bootstrap модальный: как передать данные в модальный component.ts вместо html-шаблона? - PullRequest
Новая
       45

Ngx-bootstrap модальный: как передать данные в модальный component.ts вместо html-шаблона?

0 голосов
/ 21 октября 2019

Я могу собрать данные, переданные в объекте 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, были, скажем, напечатаны в консоли в ngOnInit() методе ClienteOlocalPopUpComponent.ts ¿Как мне этого добиться? Он не распознается в файле .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 подсвечивается, как будто не существует, несмотря на то, что было передано.

1 Ответ

1 голос
/ 22 октября 2019

Обратите внимание, что объект initialState, который вы передаете this.modalService.show, не передается в качестве свойства вашему компоненту, он содержит только свойства вашего компонента, которые будут обновлены, он не инициализирует initialState property

если вы показываете модальное значение как 

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); или любое другое свойство, котороеВы решаете

...