Angular 7模式中的Bootstrap 4无法正常工作

Question

我正在处理2个子组件。一个应该触发另一个的模式

first-component.ts

import { Component, OnInit } from '@angular/core';
import { PaymentModalComponent } from './some-directory';

declare var $: any;

export class InvoicesComponent implements OnInit {
  paymentModal = new PaymentModalComponent();

  showPaymentModal(): void {
    alert('I am clicked in invoices');
    this.paymentModal.showModal();
  }
 }

这是第二个组成部分。

declare var $: any;

export class PaymentModalComponent implements OnInit {

  showModal():void {
    alert('I am clicked in payment modal');
    $('#paymentModal').modal('show');
  }
 }

这就是我所说的模态

<button type="button" class="btn btn-success btn-sm mr-2"
 data-toggle="modal" data-target="#paymentModal (click)="showPaymentModal()">
                  Tender</button>

两个alert()已被调用。但是模态没有显示。样式和脚本位置正确。脚本的顺序也是正确的。因为我试图将按钮和模式放在相同的组件上，所以它可以正常工作。

有些人可能会告诉我使用ngx-bootstrap，但我真的很想尝试解决这个问题。