时间戳

首页 > 解决方案 > 如何在子组件上触发引导模式？角

javascript - 如何在子组件上触发引导模式？角

问题描述

我使用引导程序和角度。想象一下我有父母和孩子的情况。

表格组件是父模态组件是子组件。

在表格组件中我想单击编辑按钮并打开模态（子组件）在模态组件中我想显示引导模式

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这是问题，因为按钮触发器在父组件上......如何从父数据打开模式并显示？

这是父表组件。

<tr *ngFor="let menu of allMenus | searchInput:searchTerm; let i=index"> 
    <td> 
        <button (click)="toggleModal(menu)" class="btn btn-secondary mr-3"> Edit </button>
        <button (click)="removeMenu(menu)" class="btn btn-secondary"> Remove </button>
    </td>
</tr>

标签： javascripthtmlangular

解决方案

您可以使用带有 *ngIf 检查布尔值（displayChild）的 ng-container 包装您的子组件标签（选择器），试试这个：

public displayChild: boolean = false;

onToggle(){
  displayChild == false ? true : false; 
}
<button (click)="onToggle()">Click!</button>

<ng-container *ngIf="displayChild">
  <child-component></child-component>
</ng-container>

推荐阅读