如何为Ion-Popover设置ion-grid作为参考点？

现有父组件HTML代码：

<ion-grid *ngIf="headerService.showSearch()">
  <ion-row id="searchbar" class="main-searchbar ion-align-items-center">
    <ion-col size="11">
      <ion-searchbar class="custom" placeholder="Buscar entre mis productos" type="text"
        showClearButton="never" id="searchInput" #searchBar (ionInput)="headerService.onSearchInput($event)"
        (keyup.enter)="headerService.onEnterPress($event)"></ion-searchbar>
    </ion-col>
    <ion-col size="1" id="trigger-filter">
      <svg xmlns="" width="20" height="20" fill="#808080"
        class="bi bi-funnel-fill ion-float-right" viewBox="0 0 16 16">
        <path
          d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z" />
      </svg>
    </ion-col>
    <app-search-popover></app-search-popover>
  </ion-row>
</ion-grid>

Popover组件的HTML代码：

<ion-popover trigger="trigger-filter" triggerAction="click" interface="popover" side="bottom" size="auto"
  [dismissOnSelect]="false" class="custom-popover" show-backdrop="false">
  <ng-template class="content-popover">
    <ion-grid>
      <ion-list>
        <ion-row class="underline-input">
          <ion-input placeholder="Nombre" id="name" />
        </ion-row>
        <ion-row class="underline-input">
          <ion-input placeholder="SKU" id="sku" />
        </ion-row>
        <ion-row class="column-item underline-input">
          <ion-col>
            <ion-text><b>Precio</b></ion-text>
          </ion-col>
          <ion-col>
            <ion-input placeholder="Desde" id="min" />
          </ion-col>
          <ion-col>
            <ion-input placeholder="Hasta" id="max" />
          </ion-col>
        </ion-row>
        <ion-row class="column-item underline-input">
          <ion-select placeholder="Categorias" interface="popover" id="category" >
            <ion-select-option *ngFor="let item of headerService.categories" value="{{item.id}}">{{item.name}}</ion-select-option>
          </ion-select>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <ion-button style="width: 100%;" color="buttoncolor"  (click)="headerService.sendOptions()">
              Buscar
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-list>
    </ion-grid>
  </ng-template>
</ion-popover>

当前点击ion-col可正常触发Popover，但Popover以该ion-col为参考点显示在其下方，需要将参考点改为外层的ion-grid。

解决方案 #

步骤1：调整父组件结构，添加模板引用与触发事件

给外层ion-grid添加模板引用变量，同时给触发用的ion-col绑定点击事件：

<ion-grid *ngIf="headerService.showSearch()" #searchGrid>
  <ion-row id="searchbar" class="main-searchbar ion-align-items-center">
    <ion-col size="11">
      <!-- 搜索框内容保持不变 -->
    </ion-col>
    <ion-col size="1" id="trigger-filter" (click)="openFilterPopover()">
      <!-- SVG图标保持不变 -->
    </ion-col>
  </ion-row>
</ion-grid>

步骤2：在父组件中手动控制Popover弹出

在父组件的TS文件中，注入PopoverController，实现弹出逻辑并指定参考元素为外层ion-grid：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { SearchPopoverComponent } from './path/to/search-popover.component';

@Component({
  selector: 'your-parent-component', // 替换为实际的父组件选择器
  templateUrl: './your-parent-component.html'
})
export class YourParentComponent {
  @ViewChild('searchGrid') searchGrid!: ElementRef;

  constructor(private popoverCtrl: PopoverController) {}

  async openFilterPopover() {
    const popover = await this.popoverCtrl.create({
      component: SearchPopoverComponent,
      event: { target: this.searchGrid.nativeElement }, // 指定参考元素为外层ion-grid
      side: 'bottom', // 根据需求调整弹出方向，可选top/bottom/start/end
      align: 'start', // 调整对齐方式，可选start/center/end
      dismissOnSelect: false,
      showBackdrop: false,
      cssClass: 'custom-popover'
    });

    await popover.present();
  }
}

步骤3：简化Popover组件内容

修改app-search-popover组件的HTML，移除<ion-popover>标签，只保留筛选内容：

<ion-grid>
  <ion-list>
    <ion-row class="underline-input">
      <ion-input placeholder="Nombre" id="name" />
    </ion-row>
    <ion-row class="underline-input">
      <ion-input placeholder="SKU" id="sku" />
    </ion-row>
    <ion-row class="column-item underline-input">
      <ion-col>
        <ion-text><b>Precio</b></ion-text>
      </ion-col>
      <ion-col>
        <ion-input placeholder="Desde" id="min" />
      </ion-col>
      <ion-col>
        <ion-input placeholder="Hasta" id="max" />
      </ion-col>
    </ion-row>
    <ion-row class="column-item underline-input">
      <ion-select placeholder="Categorias" interface="popover" id="category" >
        <ion-select-option *ngFor="let item of headerService.categories" value="{{item.id}}">{{item.name}}</ion-select-option>
      </ion-select>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <ion-button style="width: 100%;" color="buttoncolor"  (click)="headerService.sendOptions()">
          Buscar
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-list>
</ion-grid>

内容的提问来源于stack exchange，提问作者Juan Manuel