Angular Панель автозаполнения материалов не скрывается, когда автозаполнение скрывается в области прокрутки - PullRequest
Новая
       60

Angular Панель автозаполнения материалов не скрывается, когда автозаполнение скрывается в области прокрутки

0 голосов
/ 06 августа 2020

enter image description here

There is a bug I've opened up for this (https://github.com/angular/components/issues/20209), Я задаю этот вопрос, чтобы узнать, есть ли обходной путь или исправление, которое знает кто-нибудь.

Проблема в отображается на этой демонстрационной странице https://stackblitz.com/edit/angular-rczreu

Проблема связана с тем, что панель CDK (панель автозаполнения) отображается как отдельный слой в демонстрации, отличный от элемента автозаполнения. Таким образом, когда элемент автозаполнения перемещается из видимой области прокручиваемого элемента, автозаполнение становится скрытым, но панель не скрывается из-за этого отдельного рендеринга слоя.

В псевдокоде , angular html выглядит следующим образом: 

<html>
<body>
<my-app>

<my-component cdkScrollable> // this is a scrollable element, it's children should become hidden when we scroll

<autocomplete></autocomplete>
<some-other-child></some-other-child>

</my-component>

</my-app>

<div class="cdk-overlay-container">
  // ... other stuff

  <div>
    // autocomplete's panel 
  </div>
</div>

1 Ответ

1 голос
/ 06 августа 2020

Хорошо, я сделал форк вашего StackBlitz с решением здесь: https://stackblitz.com/edit/angular-rczreu-yqyphm

Вот основные моменты:

На вашем компоненте html, я добавил идентификатор компонента в formField: 

<mat-form-field #formField class="example-full-width">

Затем на вашем компоненте ts я добавил ссылки на ViewChild для элементов Autocomplete (поле формы и сама панель Autocomplete): 

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;
@ViewChild("formField") autoCompleteFormField: MatFormField;

Затем я добавил реализацию AfterViewInit к вашему компоненту, чтобы убедиться, что элементы представления уже загружены и не являются неопределенными. 

ngAfterViewInit() {
    var observer = new IntersectionObserver((entries) => {
      if(!entries[0].isIntersecting)
        console.log('Element is is not in screen');
        this.autocomplete.closePanel();
    }, { threshold: [1] });

    
 observer.observe(this.autoCompleteFormField._elementRef.nativeElement);
}

Итак, что делает этот фрагмент кода: с помощью эффективного API-интерфейса Intersection Observer, который определяет, отображается ли элемент на экране или нет. Затем просто закройте панель автозаполнения, если элемент находится за пределами экрана.

https://usefulangle.com/post/113/javascript-detecting-element-visible-during-scroll#: ~: text = To% 20know% 20whe ли% 20the% 20element% 20is% 20fully% 20visible% 20in% 20viewport, height% 20and% 20bottom% 20% 3E% 3D% 200 .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...