Primeng 自动完成组件覆盖面板元素在自动完成栏上方展开：我如何才能仅在下方展开建议面板覆盖层

Question

我一直在尝试设计 PrimeNg 自动完成组件的样式，以便当用户与其交互并且建议开始填充时，建议覆盖面板将仅显示在 primeNg 自动完成组件下方。

这是问题的视觉效果：

我一直在尝试设置组件的样式，并在尝试中添加各种属性来使其工作。有什么建议么？这是组件属性：text

这是组件的 html：

<p-autoComplete
  class="custom-auto-complete"
  [(ngModel)]="selectedResult"
  [suggestions]="results"
  (completeMethod)="search($event)"
  (onSelect)="route($event)"
  [minLength]="3"
  [showClear] = true
  [autoHighlight] = "true"
  [placeholder] = "placeHolder"
  [style]="{'width':'100%',
  'height':'100%','font-size':'18px'}"
  [inputStyle]="{'width':'100%','font-size':'18px'}"
  [panelStyle]="{'font-size':'18px'}"
  
></p-autoComplete>

该组件存在于 navsearch div 中。以下是该父组件的样式：

.navsearch {


  margin-top: 26px;
  margin-bottom: 26px;
  width: 50vw;
  height: 65px;

}

任何帮助将不胜感激，谢谢！

我尝试了 CSS 组合并将属性应用于组件，但似乎没有任何效果

Answer 1

您可以通过执行以下操作手动设置顶部属性：

1- 实现

AfterViewChecked

钩子。

2- 在您的组件中注入

NgZone

。

3- 在

<p-autocomplete>

上添加模板参考并使用

@ViewChild

:

读取它

@ViewChild('autoComplete') autoComplete: AutoComplete;

4- 在

ngAfterViewChecked()

内执行以下操作：

   this.ngZone.runOutsideAngular(() => {
      if (this.autoComplete.overlay) {
        this.autoComplete.overlay.style.top = '50px';
      }
    });

这是完整的代码： TS：

export class AppComponent implements AfterViewChecked {
  @ViewChild('autoComplete') autoComplete: AutoComplete;

  constructor(
    private ngZone: NgZone
  ) {}
  ngAfterViewChecked(): void {
    this.ngZone.runOutsideAngular(() => {
      if (this.autoComplete.overlay) {
        this.autoComplete.overlay.style.top = '50px';
      }
    });
  }

}

HTML：

<p-autoComplete
  #autoComplete
  [(ngModel)]="selectedCountry"
  [suggestions]="filteredCountries"
  (completeMethod)="filterCountry($event)"
  field="name"
  [minLength]="1"
></p-autoComplete>

PrimeNG 16 更新：

使用

overlayViewChild

代替

overlay

并将顶部更改为

overlayEl

export class AutocompleteBasicDemo implements AfterViewChecked {
  @ViewChild('autocomplete') autocomplete: AutoComplete;
  constructor(private zone: NgZone) { }
  ngAfterViewChecked(): void {
    this.zone.runOutsideAngular(() => {
      if (this.autocomplete.overlayViewChild.overlayEl) {
        (
          this.autocomplete.overlayViewChild.overlayEl as HTMLElement
        ).style.top = '90px'; // edit the top value as your use case
      }
    });
  }