将组件视图附加到页面主体

Question

Angular 7 / ngx-bootstrap 4.0.1

依赖项：

"bootstrap": "3.3.7",
"bootstrap-colorpicker": "2.5.1",
"bootstrap-duallistbox": "3.0.6",
"bootstrap-markdown": "2.10.0",
"bootstrap-progressbar": "0.9.0",
"bootstrap-slider": "9.8.0",
"bootstrap-tagsinput": "0.7.1",
"bootstrap-timepicker": "0.5.2",

在Angular 7中，我有一个组件。它只是一个按钮，当你点击它时，会显示一个模态框。

如果我从像div这样的元素中调用它，它可以正常工作。

但是，当我从下拉菜单中调用它时，模态框不会出现。

以下是我的代码：

普通调用：模态框可见：

<shared-article-copy (ArticleEM)="addArticle($event, 'articleCopie')" [agentId]="this.samplesBill.recipient.agent_Id"
    *ngIf="this.samplesBill && this.samplesBill.recipient"></shared-article-copy>

从下拉菜单呼叫：模态框不可见：

<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Test 1</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Test2 <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
        <li> <shared-article-copy (ArticleEM)="addArticle($event, 'articleCopie')" [agentId]="this.samplesBill.recipient.agent_Id"
            *ngIf="this.samplesBill && this.samplesBill.recipient"></shared-article-copy></li>
        </ul>
    </div>
</div>

我认为，我的组件视图是绑定在li元素上，而不是整个页面上。

这是我组件视图shared-article-copy 的部分代码：

<button type="button" class="btn btn-labeled btn-primary" (click)="loadModalArticleImport()" ng-dblclick="return false;">
    <span class="btn-label">
        <i class="fa fa-plus"></i>
    </span>{{ textTitle }}
</button>

<div bsModal #calculatorModal="bs-modal"  class="modal fade" tabindex="0" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true" style="background-color: white" [hidden]="!articleCalculator" (onHidden)="closeCalculatorModal()"
>
    <div class="modal-dialog modal-lg" style="background-color: white">
        <div class="modal-content">
            <div class="modal-header" *ngIf="articleCalculator">
               Modal Header 
            </div>
            <div class="modal-body">
               modal body !
            </div>
        </div>
    </div>
</div>

由于组件代码与此无关，我无法复制全部代码。

以下是其中的一部分：

export class SharedArticleCopyComponent implements OnInit {

  @Input() buttonClass: string;
  @Input() agent: Agent; // pour avoir un client par défaut
  @Input() agentId: string; // Quand on a pas lagent mais que son ID people
  @Input() textTitle: string = 'Copier un article existant';
  @Input() calculatorTitle: string = 'Détails de l\'article: ';
  @Input() AgentReadonly: boolean = false;

  @Output() public ArticleEM: EventEmitter<Article> = new EventEmitter<Article>();

  @ViewChild('copyArticleModal') public lgModal: ModalDirective;
  @ViewChild('calculatorModal') public lgCalculatorModal;

  constructor(private httpClient: HttpClient, private articlesService: ArticlesService, public agentsClientsService: AgentsClientsService, public peopleService: PeopleService,
    private sessionService: SessionService, private _route: ActivatedRoute,
    private notificationLGIService: NotificationLGIService, private datePipe: DatePipe, private domService: DomService) {

  }

如何使模态框在从下拉菜单中调用组件时仍可见？

编辑以添加loadModalArticleImport的内容：

//lgModal: @ViewChild('copyArticleModal') public lgModal: ModalDirective;
loadModalArticleImport() {      
    this.lgModal.show();
  }

- Portekoi

---

在模板中，您可以使用“?”运算符缩短访问属性的安全检查。例如：*ngIf="this.samplesBill && this.samplesBill.recipient" 可以缩短为 *ngIf="this.samplesBill?.recipient"。 - Reactgular

请更新您的问题，告诉我们您正在使用哪个Angular的Bootstrap库。 - Reactgular

@cgTag 我更新了我的问题。希望这就是你所需要的。 - Portekoi

@Portekoi 使用此线程中的答案：https://dev59.com/MaLia4cB1Zd3GeqPhFCX#56559002 - Joel Joseph

你可以直接调用该函数来调用模态框，这将按你的要求将模态框附加到 body 上。 - Joel Joseph

Answer 1

由于模态框是隐藏下拉菜单的子元素，因此您看不到它打开。

当您将组件放入下拉菜单中时，最终会得到以下DOM结构。

drop-down menu(position:absolute) > shared-article-copy > modal(position:fixed)

当您单击打开模态框的按钮时，模态框会打开，但下拉列表也会关闭，并将显示设置为none。

drop-down menu(display:none) > shared-article-copy > modal(position:fixed)

所以你看不到下拉菜单和它的任何子元素（包括你的模态框）。

解决方案：

1. 不要将模态框放在下拉菜单中（推荐）。
2. 为包含模态框的下拉菜单打补丁bootstrap CSS（在stackblitz上的演示）。

包含模态框的bootstrap下拉菜单的CSS：

.dropdown-menu.contains-modal {
    position: unset;
    display: inline-block;
    height: 0;
    width: 0;
    min-width: unset;
    overflow: hidden;
    border: 0;
    padding: 0;
}
.open>.dropdown-menu.contains-modal {
    position: absolute;
    height: unset;
    width: unset;
    min-width: 160px;
    padding: 5px 0;
    border: 1px solid rgba(0,0,0,.15);
    overflow: unset;
}

并使用

<ul class="dropdown-menu contains-modal">...

替代

<ul class="dropdown-menu">...

- Munim Munna