Kendo-条件元素的弹出锚点

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 的元素可能不存在（尽管当弹出窗口出现时它总是存在）显示）。

kendo-popup docs 声明：

If an anchor is not provided, the Popup will use the offset property value.

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

我能想到的解决这个问题的唯一方法是在 <a> 周围添加一个 <div> 或类似的东西并改为锚定它：

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

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

Answer 1

我通过将 both 弹出元素和锚元素移动到具有 *ng-if 的 <ng-container 元素中来实现这一点，如此处所述文档： https://angular.io/guide/structural-directives#ng-container-to-the-rescue

文档专门讨论了使用 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

Kendo-条件元素的弹出锚点

Kendo-popup anchor to conditional element

kendo-ui-angular2

angular