Отправить данные из компонента в другой компонент - PullRequest
Новая
       38

Отправить данные из компонента в другой компонент

0 голосов
/ 26 мая 2020

Цель:
Отправить данные переменной из компонента приложения в SomeComponent. Значение переменной должно отображаться внутри модального тела.

Проблема:
Я не знаю, как ее решить. Есть идеи?

Информация:
https://stackblitz.com/edit/ngx-modal-m9sctv

Спасибо!

SomeComponent 

<div class="modal-header">
    <h4 class="modal-title pull-left"> {{ title }} </h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    This is a modal.
</div>


import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
  selector: 'app-some',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.css']
})
export class SomeComponent implements OnInit {

  title;
  constructor(
    public modalRef: BsModalRef
  ) { }

  ngOnInit() {
  }

}

Компонент приложения 

<div class="container my-1">
    <div class="card">
        <div class="card-body">
            <h4>Ngx Bootstrap Modal Component</h4>
      <div (click)="openModal()" class="btn btn-success">Modal Component</div>
        </div>
    </div>
</div>





import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

import { SomeComponent } from './some/some.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  private test: string;
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal() {

    this.test = "abcdef";

    this.modalRef = this.modalService.show(SomeComponent,  {
      initialState: {
        title: 'Modal title',
        data: {}
      }
    });
  }
}

1 Ответ

1 голос
/ 26 мая 2020

иметь объект начального состояния в вашей переменной publi c машинописного текста. передать тот же объект в модальный; внесите изменения в свойства объекта данных для передачи данных.

Например: -

URL-адрес Stackblitz: - https://stackblitz.com/edit/ngx-modal-mvkgjy

Код: -

HTML: - 

<div class="modal-header">
    <h4 class="modal-title pull-left"> {{ title }} </h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    {{data?.item}}
</div>

ТС: - 

import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

import { SomeComponent } from './some/some.component';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public initialState =  {
        title: 'Modal title',
        data: {}
  };
  private test: string;
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal() {

    this.test = "abcdef";

    this.modalRef = this.modalService.show(SomeComponent,  {
      initialState: this.initialState,
    });
    this.initialState.data["item"]=123;
    setTimeout(() => this.initialState.data["item"] = 678, 2000);
  }
}
...