我正在使用ngx-bootstrp Modals。我必须使用嵌套的service-component模式来满足特定要求。我已经做了现场演示以显示问题。
我希望(例如)全名出现在模态中,第一个模态的名字和第二个模态的姓氏,并作为用户输入更新。
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">×</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帖子被发现类似,但并未满足我的要求。
如何达到上述要求?
谢谢你的时间..
答案 0 :(得分: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">