Как использовать наложение CDK, оставляя существующий компонент на переднем плане? - PullRequest
Новая
       17

Как использовать наложение CDK, оставляя существующий компонент на переднем плане?

0 голосов
/ 30 апреля 2018

Библиотека Angular Material CDK предоставляет различные функции, включая наложения. Все примеры, которые я могу найти, показывают, как отобразить новый компонент поверх оверлея. Моя цель немного другая. Я хочу отобразить существующий компонент (один из нескольких на экране) поверх оверлея.

Поведение, которое я имею в виду, заключается в том, что, когда пользователь входит в своего рода режим редактирования определенного объекта, компонент, представляющий этот объект, будет как бы «плавать» поверх наложения до тех пор, пока редактирование не будет выполнено или отменено.

Есть ли прямой способ сделать это? Кажется, что директива cdkConnectedOverlay может быть полезна, но я не могу понять, как заставить ее работать.

Ответы [ 2 ]

0 голосов
/ 30 июня 2018

У меня был похожий опыт, когда я хотел, чтобы триггер меню (кнопка) оставался на переднем плане, когда меню было открыто. Предпосылка проста, но вам нужен способ указать элементу, который вы хотите на переднем плане, что наложение находится в каком-то состоянии, когда оно отображается. В моем случае меню было «открыто».

Для этого я сделал три вещи:

Создайте переменную open в своем классе Компонентов 

@Component({
  selector: 'foreground-button-example',
  templateUrl: 'foreground-button-example.html',
  styleUrls: ['foreground-button-example.css'],
})
export class ForegroundButtonExample {
  open = false;
}

Обработка событий MatMenuTrigger menuOpened и menuClosed и установка class в зависимости от открытого значения 

<button mat-fab [matMenuTriggerFor]="menu" [class.toolbar-menu-open]="open" (menuOpened)="open = true" (menuClosed)="open = false">
  <mat-icon class="example-icon">star_border</mat-icon>
</button>

Затем добавьте css, чтобы вывести кнопку «Открыть» на передний план, и отключите pointer-event s для кнопки и ее дочерних элементов. Это позволит щелчкам проходить через кнопку и вызывать щелчок на наложенном фоне, чтобы закрыть его. 

.toolbar-menu-open {
  z-index: 1001;
}

.toolbar-menu-open,
.toolbar-menu-open * {
  pointer-events: none;
}

Ваш сценарий звучит так, как будто он немного другой, но я считаю, что он работает аналогичным образом.

Вот демо StickBlitz

0 голосов
/ 01 мая 2018

Angular CDK Предоставляет вам два способа достижения этого ( Директивы и услуги ).

Используя сервис Overlay, вам необходимо вызвать метод create, передав positionStrategy prop: 

@Component({
    ....
})
class AppComponent {

    @ViewChild('button') buttonRef: ElementREf;

    ...

    ngOnInit() {
        const overlayRef = overlay.create({
            positionStrategy: getOverlayPosition(),
            height: '400px',
            width: '600px',
        });

        const userProfilePortal = new ComponentPortal(UserProfile);
        overlayRef.attach(userProfilePortal);
    }

    getOverlayPosition(): PositionStrategy {
        this.overlayPosition = this.overlay.position()
        .connectedTo(
            this.buttonRef,
            {originX: 'start', originY: 'bottom'},
            {overlayX: 'start', overlayY: 'top'}
        )

        return this.overlayPosition;
    }

    ...
}

Я сделал пример, чтобы показать вам, как использовать оверлейные сервисы и классы CDK .

Демонстрация оверлея

Если вы предпочитаете путь директивы Посмотрите на эту среднюю статью и проверьте примеры применения директивы:

Материал CDK Наложение с RxJS

...