將數據從組件發送到另一個組件

Question

目標：
將變量的數據從應用組件發送到 SomeComponent。 變量的值應顯示在模態體內。

問題：
我不知道如何解決它。 任何想法？

信息：
https://stackblitz.com/edit/ngx-modal-m9sctv

謝謝！

---

一些組件

<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: {}
      }
    });
  }
}

Answer 1

在您的 typescript 公共變量中有初始 state object。 將相同的 object 傳遞給模態； 更改您的數據 object 屬性以傳遞數據。

例如：-

Stackblitz url:- 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>

TS：-

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);
  }
}