Angular 10：模型窗口在第二次点击时没有打开答案

【问题标题】：Angular 10 : Model window is not opening in second clickAngular 10：模型窗口在第二次点击时没有打开
【发布时间】：2021-07-28 13:19:18
【问题描述】：

我面临一个模型窗口问题。模型窗口出现在导航栏和叠加层的背景中。这是因为我们使用了第三方 bundle.js。那个js正在父容器下添加动态类和div。对于一类他们使用位置：固定。即模型窗口在后台出现。如果我们使用 appendTo('body').model();在这种情况下，模型窗口在第一次点击时可以正确打开，但在第二次点击时它没有打开。因为该模型 html 不在该组件下。它显示 modalImage.length = 0。

如果我们将模型 html 放在 index.html 中的父容器之外。在这种情况下，它工作正常，但 Angular 不支持。 Angular 只是在组件内部而不是外部打开模型。

在这种情况下我应该怎么做？如何处理？我是不是做错了什么？

索引.html

        <body class="multi-app">
          <div id="parent-container">
            <div>
              <div>        
                <cfapp-root></cfapp-root>
              </div>
            </div>
          </div>
        </body>

app.component.ts

        @Component({
          selector: 'cfapp-root',
          template: `<router-outlet></router-outlet>`,
          styleUrls: ['./app.component.css']
        })

app.rounting.module.ts

        const routes: Routes = [
            { path: '', component: DashboardComponent},
        ];

dashboard.component.ts

        import { Component, OnInit, ViewChild } from '@angular/core';
        import { BuyersComponent } from "../buyers/buyers.component";

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

          @ViewChild(BuyersComponent, { static: true }) buyerPop: BuyersComponent;
          constructor() { }

          ngOnInit(): void {
          }

          popupBuyerNetSheet(event: any) {
            this.buyerPop.openBuyerPOPUP(event);
          }

          callCountyComp(event: any){

          }
        }

dashboard.component.html

        <div class="col-6 col-xl-4 opt-box">
            <a href="javascript:void(0)" class="box-inner h-100 bg-2 text-center"
                (click)="popupBuyerNetSheet($event)">
                <div class="box-icon d-inline-flex align-items-center justify-content-center">
                    <img src="assets/images/icons.svg" alt="" width="26">
                </div>
                <h6 class="box-title">Buyer Pop Up</h6>
                <p class="box-subtitle d-none d-xl-block">Closing Costs</p>
            </a>
        </div>

buyer.component.ts

         openBuyerPOPUP(event) {
            let modalImage = $(this.elementRef.nativeElement).find("div#BuyerPopUpHtml");
            modalImage.modal("show");
         }

buyer.component.html

         <div class="modal fade" id="BuyerPopUpHtml" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                    This is body.
              </div>
            </div>
         </div>

【问题讨论】：

可以增加modal的z-index。如果你能创建一个工作演示会更好
这不是 z-index 处理的。我的设计师已经尝试过。我认为这应该从 jQuery 解决。如果我们将模型 html 放在父容器之外。在这种情况下，它工作正常，但 Angular 不支持。 Angular 只是在组件内部而不是外部打开模型。

标签： jquery angular bootstrap-4

【解决方案1】：

我得到了解决方案。我正在使用 jQuery 使用模型窗口。但是当我使用 NgbModule 时，它会自动将模型窗口附加到正文中。

安装 Ng Bootstrap 包。

npm install --save @ng-bootstrap/ng-bootstrap

将 NgbModule 导入 app.module.ts 文件。

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：