当 container= 在 ngbpopover 中使用时，Ngbpopover 没有采用在 ng-template 中定义的外部 cs "body"

Question

我希望我的ngbpopover出现在父元素的顶部，因为它出现在父元素的下方。我把container="body"在ngbpopover中修复给定的问题，但不知何故，外部css没有出现，我在ng-template中定义。

<mat-tab-group animationDuration="0ms">
<div *ngFor="let sampleData of sampleDataInfo[j]; let i=index">
<mat-tab label="{{targetData[j][i].fullName}}">
<table class="source-target-Info-table">
<tr class="source-target-Table">
<th><img data-toggle="tooltip" data-placement="bottom" title="Sub1"></th>
<th>row2</th>
<th>row3</th>
<th>row4</th>
<th>row5</th>
<th>row6</th>
<th>row7</th>
<th>row8</th>
<th>row9</th>
<th>row10</th>
</tr>
<tr *ngFor="let target of targetData[j][i].files; let file=index">
<td>
<a class="info-link" href="javascript:;" title=" Log-{{sampleData?.sessionId}}" (click)="openDexLog(j,i)">
{{(1)}}
</a>
</td>
<td *ngIf="target.qualityLevel > 0; else negativeQuality">
**<a class="info-link" href="javascript:;" title="Click to see Quality result files" href="javascript:;" placement="top-left" popoverClass="popover-class" [ngbPopover]="popContentQuality" container="body">{{target.qualityLevel}}</a>**
</td>

**
<ng-template class="quality-popover" #popContentQuality>**
<h1 class="quality-heading">Quality Results for</h1>
<h3 class="file-name">{{target.name}}</h3>
<table class="source-target-Info-table">
<tr class="source-target-Table">
<th>FILE NAME</th>
<th>SIZE</th>
<th>DESCRIPTION</th>
</tr>
<tr *ngFor="let tq of tqData; let i=index">
<td>
<a class="info-link" href="javascript:;">{{tq.name}}</a>
</td>
<td>{{tq.size/1000}} KB</td>
<td>{{tq.description}}</td>
</tr>
</table>
</ng-template>
</tr>
</table>
</mat-tab>
</div>
</mat-tab-group>

它只使用内联格式定义的css(使用style)。是否有任何使外部css工作时，container="body"对于ngbpopover在ng-template?我也试图定义组件,包括身体的外部css标签但这并不为我工作。任何关于这方面的建议都会很有帮助。

Answer 1

可能包含在:host选择器中的样式。输入容器="body"使工具提示内容不在宿主组件内。