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">
.
.
.

我该如何解决？我正在使用Angular 6

Answer 1

在第一种情况下，您要引用templateRef crearProcesoAsociado并调用show函数。

#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();
}

无法读取未定义的属性“ show”（调用模式）

2 个答案: