PrimeNG 日历 - 附加到正文以外的其他内容答案

【问题标题】：PrimeNG Calendar - appendTo something else than bodyPrimeNG 日历 - 附加到正文以外的其他内容
【发布时间】：2019-07-28 00:31:09
【问题描述】：

问题：
我在一个狭窄的 HTML 页面中使用 p 日历：高度非常低。在这种情况下，日历只是隐藏了定位错误的输入字段

复制步骤：

转至https://www.primefaces.org/primeng/#/calendar
使用低值高度调整导航器窗口的大小
打开一些日历
或者到这里去blitzstack玩一下控制台高度：https://stackblitz.com/edit/github-stwowy

结果：
日历覆盖输入字段：

我正在尝试的解决方案

我试过 [appendTo]="'body'" ：它不起作用，日历的位置仍然隐藏输入字段
我想将日历覆盖附加到另一件事：

    <ng-template #attachMe0></ng-template>
    <div id="attachMe1">
        <p-calendar #calendarRangeFacture
                    [(ngModel)]="rangeDates"
                    appendTo="attachMe0">
        </p-calendar>
    </div>

    <button class="blue-button" pButton  (click)="doIt()" label="OK"></button>
    <span id="attachMe2"></span>
    <div id="attachMe3"></div>
    <ng-template id="attachMe4"></ng-template>
    <ng-template #attachMe5></ng-template>

在这里，我放了很多我尝试过的事情的例子。所有 attachMe 都会产生相同的错误：

有什么想法吗？请问我做错了什么？

[编辑] BLITZSTACK 玩：https://stackblitz.com/edit/github-stwowy
只要确保控制台变得高昂：

【问题讨论】：

试试appendTo="body"，不带方括号[ ]
感谢您提供信息，但我当然尝试了 appendTo="body" 和 [appendTo]="body" 和 [appendTo]="'body'"（带单引号）以及所有其他组合。没有任何效果我仍然有问题
如何为日期选择器面板设置一个边距顶部，例如this
附加叠加层的目标元素，有效值为“body”或另一个元素的本地 ng-template 变量。
@MoxxiManagarm 对此表示感谢，但下面的代码显示了我尝试过的其他 html 元素，您可以在其中看到 2 个 ng 模板。与他们同样的错误

标签： angular primeng primeng-calendar

【解决方案1】：

我有两个 Angular 应用程序，它们都有弹出窗口，其中需要 PrimeNG 日历组件，我不想裁剪日历。

在第一个应用程序中，只需添加这一行就可以正常工作 - 但是 - 弹出窗口与网页的其余部分位于相同的 .html 页面中。（所以，它是一个 .html 页面，包含常规页面和弹出窗口的标记。）

appendTo="body"

在第二个应用程序中，网页打开了一个弹出窗口作为一个单独的组件，然后这个appendTo 根本不起作用。

所以，我对这个问题的回答是，是的，appendTo 是一个解决方案....但令人讨厌的是，它不会一直适用于 Angular 应用程序。

而且您可能必须通过将弹出标记移动到“调用”网页中来使您的 Angular 应用程序更丑陋，以使其正常工作。

【讨论】：

【解决方案2】：

版本 -> 在我的应用程序中使用

Angular CLI：7.3.9
节点：12.13.1
角度：7.2.15
启动：7.1.3

尝试像这样使用 appendTo，它对我有用

 [appendTo]="'body'"

仍在修复中，日历总是在底部打开！

【讨论】：