Question

我试图根据从ajax调用中获得的结果显示错误/确认/警告的模态。

使用Ajax调用的组件 -

ngOnInit() {
    this.initializeValues();
}

initializeValues = function () {
    this._dataService.post("getInfoByUser", request, null).subscribe(data => 
    {...}, error => {
        this._modalService.showError(Constants.TECH_EXCEPTION);
    }); 
}

模态服务 -

export class ModalService {

  _pbModal: PubSubService = this.pubSubServiceModal;

  constructor( @Inject(PubSubService) private pubSubServiceModal){
  pubSubServiceModal.subjects = new Map<string, Subject<Modal>>();
  }

  showError(msg: string){
  var modal = new Modal(Constants.ERROR,msg);
  var data = { key: "showModal", value: modal };
    this._pbModal.publish(data); 
  }

  showAlert(msg: string){}
  ...

模态组件 -

import { ModalDirective } from 'ngx-bootstrap';
export class ModalComponent {
...
@ViewChild('appModal') appModal: ModalDirective;
showModal() {
    this.appModal.show();
}

模态组件HTML -

<div  id="modalDialog001-alert" class="modal fade" bsModal #appModal="bs-modal" [config]="{backdrop: ''}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog" style="top:10%">
  <div class="modal-content">
   <div class="modal-header padding-5">
    <button type="button" class="close" aria-label="Close" (click)="close()"><span aria-hidden="true">&times;</span></button>
    <h3 class="modal-title">Sample Modal</h3>
   </div>
   <div class="modal-body">
    <ng-content select=".modal-body"> </ng-content>
  </div>
  <div class="modal-footer" style="text-align:right">
    <button type="button" class="btn btn-primary" (click)="confirmClick()"><i class="glyphicon glyphicon-ok"> Ok</i></button>
    <button *ngIf="showConfirm" class="btn btn-default" (click)="close()" type="button">Cancel</button>
  </div>
</div>

调用Component（传递Modal Body内容） -

export class AppComponent implements OnInit {
@ViewChild('appModal') appModal: ModalComponent;
showConfirm: boolean = false;
error: string = Constants.ERROR;
alert: string = Constants.ALERT;
type: string;
msg: string;

constructor(private _modalService: ModalService,private viewContainerRef: ViewContainerRef) {   
this._modalService._pbModal.subscribe("showModal").subscribe({ next: (modal: Modal) => this.showModal(modal) });
}

showModal(modal) {
    this.msg = modal.msg;
    this.type = modal.type;
    this.showConfirm = true;
    this.appModal.showModal(); // **Throws error here - this.appModal is undefined here and I'm not able to call showModal of Modal Component**
 }
...

AppComponent HTML -

<app-modal>
 <div class="modal-body">
  <span class="glyphicon sb-alert-icon" [ngClass]="{ 'glyphicon-remove-sign text-danger': (type == error),'glyphicon glyphicon-alert text-warning': (type == alert) }" >{{msg}}</span>
 </div>
</app-modal>

我在调用组件的下面代码行中遇到以下错误 -

错误类型错误：无法读取属性＆＃39; showModal＆＃39;未定义的

this.appModal.showModal(modal);

尝试在appcomponent的ngAfterViewInit（）中添加此行，但没有用。请告诉我如何在我的案例中从Appcomponent调用Modalcomponent的方法。

更新

appcomponent.html中的以下行导致了问题 -

<app-modal>

我添加了以下和模态出现 -

<app-modal #appModal>

但是，我看到glyphicon css无法正确呈现。

我可以使这适用于警报，错误，信息的模态（虽然有CSS问题）。但是对于＆＃39;确认模式，我需要同时显示OK＆amp; amp;我之前使用* ngIf做的取消按钮。现在我分别渲染了Body内容，我怎样才能在页脚中单击按钮以确认＆＃39;确认＆＃39;莫代尔？看起来我需要改变我目前的做法，但不确定如何。

角度2 - ngx-bootstrap在ajax调用上显示错误/警告/确认模态

0 个答案: