Question

在此处使用Angular 6。我有一个带有按钮的应用程序组件。单击此按钮后，我尝试在我的模式中打开我的子组件，并将一些数据绑定到该组件。虽然一切正常，但关闭模式会导致错误“ TypeError：无法读取未定义的属性'hide'”

我将模式打开为：

this.modalRef = this.modalService.show(Child1Component,
          { initialState: { data }, ignoreBackdropClick: true, animated: true, keyboard: true, class: 'modal' });

在我的孩子html中，结尾为：

<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>

我希望在关闭模态时它应该关闭而不出错。

演示：https://angular-modal-pop-wsesd4.stackblitz.io

编辑者：https://stackblitz.com/edit/angular-modal-pop-wsesd4

Answer 1

您可以通过在组件中注入BsModalRef来获得模式参考，如下所示：

constructor ( public modalRef: BsModalRef, private modalService: BsModalService, private appService: AppService) {   }

现在您可以从组件中删除modalRef属性。

Answer 2

您应该更新您的孩子以注入/usr/local/etc/logstash/，然后在单击按钮时调用hide on：

BsModalRef

来自HTML：

import { Component, TemplateRef, Output, EventEmitter  } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';
import { AppService } from './app.service';
import { BsDropdownModule } from 'ngx-bootstrap';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { FormGroup, FormControl } from '@angular/forms';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'child1-app',
  templateUrl: './child1.component.html',
  styleUrls: [ './app.component.css' ]
})
export class Child1Component  {

  data: string[];
  @Output() onHide = new EventEmitter<void>();
  constructor(private modalService: BsModalService, private appService: AppService, 
      private bsModalRef: BsModalRef) {
  }

  ngOnInit() { }



  doHide() {
    this.bsModalRef.hide();
  }

}

角度：关闭模态时出现错误“无法读取未定义的属性”隐藏”

2 个答案: