如何使用角度从嵌套组件模态 ngx-bootstrap 获取输入值

Question

我正在使用ngx-bootstrp Modals。我必须使用嵌套的服务组件模式来满足特定要求。我已经做了现场演示来显示问题。

演示

我希望(例如(全名出现在模态中，名字来自第一个模态，姓氏出现在第二个模态中，并作为用户输入进行更新。

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

@Component({
    selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent{
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}
  person:any={}
  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
  openModalWithComponent() {
    this.modalRef = this.modalService.show(ModalContentComponent);
    this.modalRef.content.title = 'Modal with component';
  }
}
/* This is a component which we pass in modal*/
@Component({
  selector: 'modal-content',
  template: `
    <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">
    <input type="text" placeholder="Last Name">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button>
    </div>
  `
})
export class ModalContentComponent {
  title: string;
  constructor(private modalService: BsModalService) {}
}

我发现这个SO帖子发现相似，它没有完全满足我的要求。

如何达到上述要求？

感谢您的时间..

Answer 1

您可以为两种模态使用共享对象。不是一个完美的解决方案，但它应该有所帮助。

第一个模态

person = {fname: '', lname: ''};
openModal() {
   this.modalRef = this.modalService.show(ModalContentComponent);
   this.modalRef.content.person = this.person;
}

第二个模态模板

<input type="text" *ngIf="person" placeholder="Last Name" [(ngModel)]="person.lname">

示例：https://stackblitz.com/edit/angular-nested-component-modal-ngx-bootstrap-not-working-k4pglr?file=app/app.component.ts