Question

目标：
将变量的数据从应用程序组件发送到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: {}
      }
    });
  }
}

Answer 1

在您的打字稿公共变量中具有初始状态对象。将同一对象传递给模态；在数据对象属性中进行更改以传递数据。

例如：-

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>

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

将数据从组件发送到另一个组件

1 个答案: