无法读取属性“秀”的未定义（称之为模式）

Question

我有一个代码，其中具有只是把这段代码：

(click)="crearProcesoAsociado.show()"  //#crearProcesoAsociado id of my modal

我的模式被调用。之前，我有我的代码以这种方式和模式的通话效果很好。

<a type="button"  (click)="crearProcesoAsociado.show()" >
  open modal
</a>
<div mdbModal #crearProcesoAsociado="mdbModal" class="modal fade" id="crearProcesoAsociado" tabindex="-1" role="dialog"
  aria-labelledby="crearProcesoAsociado" aria-hidden="true" [config]="{backdrop: true, ignoreBackdropClick: false}">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
    .
    .
    .

但为维护我的代码，我决定专门创建一个组件为我的模式与其相应的HTML。然后，从将要成为父亲的成分，我称之为模态分量：

<modal_procesos></modal_procesos>

现在，这些变化我不知道为什么它不工作

HTML父

<a type="button"  (click)="crearProcesoAsociado.show()" >
  open modal
</a>
<modal_procesos ></modal_procesos>

莫代尔模板（儿子）

<div mdbModal #crearProcesoAsociado="mdbModal" class="modal fade" id="crearProcesoAsociado" tabindex="-1" role="dialog"
  aria-labelledby="crearProcesoAsociado" aria-hidden="true" [config]="{backdrop: true, ignoreBackdropClick: false}">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
.
.
.

我该怎么解决呢？我使用的6角

Answer 1

在第一种情况下，你指的是templateRef crearProcesoAsociado和调用显示功能。

#crearProcesoAsociado="mdbModal" <--- this

当你把它移动到不同的成分，是在模板中没有更多的crearProcesoAsociado让您访问show()功能。

为了解决这个问题，必须创建modal_procesos称为show内部的功能和使用ViewChild以访问它的模板内crearProcesoAsociado从新建的函数内部调用crearProcesoAsociado.show()。此外，你将不得不附加templateRef到modal_procesos调用它show()方法像上面。

在HTML父

<a type="button"  (click)="modalProcesos.show()" >
  open modal
</a>
<modal_procesos #modalProcesos ></modal_procesos>

在modal_procesos组件的.ts

@ViewChild(crearProcesoAsociado) crearProcesoAsociado;

... // other code

public show() {
    this.crearProcesoAsociado.show()
}

Answer 2

据我所知，它不工作的方式。如果你想这样做，那么你必须使用viewChild来指代子组件，那么你将不得不打电话给开模态的方法。例如使用MDBModalRef。

因此，父组件，你可以使用：

@ViewChild('crearProcesoAsociado') <YourModalComponentNameHere>

openModal(){ 
  YourModalComponentNameHere.open()
}

那么你的孩子，你可以有：

constructor(private modalRef: MDBModalRef) {}

open(){
  this.modalRef.open();
}