Question

我在客户组件中有一个带有操作按钮的表。为了获得更好的可维护性，我使用操作按钮分别创建了一个名为customer-actions的新组件，并在客户组件中用作<app-customer-actions></app-customer-actions>，如下所示。 Modal opens successfully but without focused作为实际输出屏幕截图中的显示。

customer.component.html

<table id="bootstrap-data-table-export" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Contact</th>
            <th>Amount</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{customer.name}}</td>
            <td>{{customer.contact}}</td>
            <td>{{customer.amount}}</td>
            <td>
               <app-customer-actions></app-customer-actions>
            </td>
        </tr>
    </tbody>
</table>

customer-actions.component.html

<button title="Deposite Money" data-toggle="modal" data-target="#customerDepositeMoneyModal" class="w3-button w3-medium w3-green w3-card-4" >
  <i class="fa fa-inr" style="color: white;"></i>
</button>&nbsp;  

<div class="modal fade" id="customerDepositeMoneyModal" tabindex="-1" role="dialog" aria-labelledby="customerDepositeMoneyModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="customerDepositeMoneyModal">Receipt</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

               Test Modal

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Print</button>
                <button type="button" class="btn btn-success">Save</button>
            </div>
        </div>
    </div>
</div>

实际输出：（无焦点）

预期输出：（具有焦点）

Answer 1

可能是因为它在标记内。将其移到桌子外面。

理想情况下，您应该有一个app-customer-action标签

<app-customer-actions></app-customer-actions>

在您的组件中，并根据一些操作隐藏/显示它。例如

customer.component.ts

...
isModalOpen : boolean = false;
openModal() {
    this.isModalOpen = true;
}
...

customer.component.html

<button (click)="openModal()">Click to open modal</button>
...
...
<app-customer-actions [hidden]="!isModalOpen"></app-customer-actions>

如果您想根据执行的操作在模态中显示不同的内容，可以将其作为输入传递。

<app-customer-actions
    [hidden]="!isModalOpen"
    [isPaymentModal]="isPayment"
></app-customer-actions>

让我知道您的用例是否其他情况。

Angular Modal未聚焦

1 个答案: