首先，你似乎在使用vanilla javascript和HTMl的引导库。你应该考虑切换到“Angular powered Bootstrap”（https：//ng-bootstrap.github.io/#/），以便利用angular的好处。你将得到相同的组件，但能够在你的angular应用程序中注入不同的模块。
之后，您应该创建一个包含弹出模态代码的新组件。
然后，您可以在页脚组件中注入NgbModal，如下所示：第一个月
然后，您可以使用const modalRef = this.modalService.open(YourTermsOfUseComponent);打开模态on按钮单击
有关如何从Angular 分量打开模态的详细信息，请访问以下位置：https://ng-bootstrap.github.io/#/components/modal/examples

这是我如何修复它，首先添加nb Bootstrap 到您的项目

ng add @ng-bootstrap/ng-bootstrap

如果添加ng bootstrap时出现错误，请先运行以下命令，然后再尝试以上命令。

npm config set legacy-peer-deps true

现在在footer.component中添加以下代码

<footer class="text-center text-lg-start text-muted fixed-bottom">
    <div class="text-center p-2" style="gray;">
      Copyright 2001-2022. All rights reserved. Confidential.

      <a class="text-reset" [routerLink]="" style="cursor:pointer;" data-toggle="collapse" 
      (click)="open(mymodal)">Terms of Use | </a>
      <a class="text-reset" href="https://mdbootstrap.com/">Privacy Statement</a>
    </div>
  </footer>

<!-- Modal -->

<ng-template #mymodal let-modal>
    <div class="modal-header">
        <h4 class="modal-title">Terms of Use</h4>
        <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
    </div>
    <div class="modal-body">
        
        <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
            Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
            rutrum faucibus dolor auctor.
        </p>
        <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
        </p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
    </div>
</ng-template>

在footer.component.ts文件中添加以下代码

import { Component, OnInit } from '@angular/core';
import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  closeResult: string = '';
  constructor(private modalService: NgbModal) { }

  ngOnInit(): void {
  }

  open(content:any) {
    this.modalService.open(content, { scrollable: true, ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }
  
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

当你点击页脚的 * 使用条款 * 链接，你会得到如下所示的模型弹出窗口在您的屏幕中心.