从组件向另一个组件发送数据

Question

目标：将一个变量的数据从app组件发送到SomeComponent。变量的值应该显示在模式体中。

问题：我不知道如何解决这个问题。有什么办法吗？

信息：我不知道如何解决这个问题，有什么办法吗？https:/stackblitz.comeditngx-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公共变量中有初始状态对象，将该对象传递给modal；改变你的data对象属性以传递数据。

例如：-

Stackblitz的网址：- https:/stackblitz.comeditngx-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);
  }
}