1

我正在尝试根据我从 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>

调用组件（传递模态正文内容） -

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**
 }
...

应用组件 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>

我在调用组件时收到以下代码行的以下错误 -

错误类型错误：无法读取未定义的属性“showModal”

this.appModal.showModal(modal);

试图在 appcomponent 的 ngAfterViewInit() 中添加这一行，但没有奏效。请让我知道在我的情况下如何从 Appcomponent 调用 Modalcomponent 的方法。

更新

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

<app-modal>

我添加了以下内容并出现了模态 -

<app-modal #appModal>

但是，我看到 glyphicon css 没有正确呈现。

我可以使它适用于警报、错误、信息的模态（尽管有 CSS 问题）。但是对于“确认”模式，我需要同时显示我之前使用 *ngIf 执行的确定和取消按钮。现在我正在单独渲染正文内容，我如何在页脚中单独显示“确认”模式的按钮？看起来我需要改变我目前正在做的方式，但不确定如何。

4

0 回答 0