剑道弹出锚到条件元素

Question

我的模板中有以下内容，它按预期工作，并在锚点元素旁边显示弹出窗口：

<a title="Search" #searchAnchor (click)="toggleSearchPopup()">
<icon [iconId]="'search'"></icon>
</a>
<kendo-popup #searchPopup
[anchor]="searchAnchor"
[anchorAlign]="anchorAlign"
[popupAlign]="popupAlign"
*ngIf="show">
<!-- popup content... --> 
</kendo-popup>

我现在已经用ngIf设置了锚元素的条件，但弹出窗口不再显示在锚旁边，它显示在位置0, 0:

<a *ngIf="loggedIn" title="Search" #searchAnchor (click)="toggleSearchPopup()">
<icon [iconId]="'search'"></icon>
</a>

IDE还在[anchor]="searchAnchor"行警告我Unresolved variable or type searchAnchor，可能是因为具有该id的元素可能不存在(尽管在显示弹出窗口时总是存在(。

剑道弹出文档声明：

如果没有提供锚点，Popup将使用offset属性价值

这似乎就是正在发生的事情。

我能想到的唯一方法是在<a>周围添加一个<div>或类似的内容，并将其锚定：

<div #searchAnchor>
<a *ngIf="loggedIn" title="Search" (click)="toggleSearchPopup()">
<icon [iconId]="'search'"></icon>
</a>
</div>

这再次将弹出窗口锚定在正确的元素旁边，但有更好的方法吗？这样我仍然可以锚定到<a>，但不知何故，它会在弹出窗口打开时出现？

Answer 1

我通过在具有*ng-if的<ng-container元素内移动弹出窗口和锚点元素来实现这一点，如文档中所述：https://angular.io/guide/structural-directives#ng-集装箱救援

文档特别讨论了使用HTML容器元素，如<div>(正如我所尝试的(，并指出尽管这很有效，但可能会产生破坏外观的意外后果。

我现在的工作代码是：

<ng-container *ngIf="loggedIn">
<a title="Search" #searchAnchor (click)="toggleSearchPopup()">
<icon [iconId]="'search'"></icon>
</a>
<kendo-popup #searchPopup
[anchor]="searchAnchor"
[anchorAlign]="anchorAlign"
[popupAlign]="popupAlign"
*ngIf="show">
<!-- popup content... --> 
</kendo-popup>
</ng-container>

这里显示了一个简化的工作示例：https://stackblitz.com/edit/angular-ypkajr