Question

我试图从另一个组件中调用一个组件中的模式（使用Mdbootstrap创建），但是我很难在Angular中实现。好吧，这是模态代码：[editComponent.html]：

<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
        <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save changes</button>
      </div>
    </div>
  </div>
</div>

还有一个名为[ProduitComponent.html]的组件，其中有一个按钮（“编辑”），一旦单击该按钮，“模态”应该出现在同一页面上。

谢谢！

Answer 1

您只能通过几种方式完成此操作。如果尝试从另一个组件在一个组件内执行代码，则必须获取对该组件的引用。然后，您可以使用ComponentRef<Component>.instance访问公共属性/方法。

我建议将对话框（模式）移动到某种DialogService，以便您可以轻松地从所需的任何组件中调用对话框。由于mdbootstrap并没有预先包装好的现成对话框，您可能必须创建一个BootStrapModalComponent，然后在服务中使用ComponentFactory动态插入该对话框< / p>

示例：

const componentFactory = ComponentFactoryResolver.resolveComponentFactory(MyBootstrapModalComponent);
ViewContainerRef.createComponent(componentFactory);

然后，在您的服务中，当他们调用dialogOpen之类的东西时，您将具有运行组件创建过程的逻辑。当他们调用dialogClose时，您将运行类似的逻辑来破坏对话框。

IMO，Angular Material团队进行MatDialog / MatDialog`的方式要干净得多。它们提供了CDK，您也许可以使用它来使引导程序模式更通用。

另一种选择是走穷人路线，并创建一个仅有DialogService的{{1}}。 EventEmitter可以是在组件之间共享的单例服务，以在任何组件之间传输打开/关闭事件。尽管这可以毫无问题地起作用，但它并不那么优雅。

角度-如何从另一个组件中调用一个组件中的模态？

1 个答案: