Question

Angular Material CDK库提供各种功能，包括叠加。我可以找到的所有示例都显示了如何在叠加层顶部显示新组件。我的目标有点不同。我想在叠加层顶部显示现有组件（屏幕上的几个组件之一）。

我想到的行为是，当用户进入某种特定对象的编辑模式时，表示该对象的组件会在叠加层上“浮动”，直到编辑完成或取消。

有没有直截了当的方法呢？似乎cdkConnectedOverlay指令可能有用，但我无法弄清楚如何使其工作。

Answer 1

Angular CDK为您提供两种方法（指令和服务）。

使用Overlay服务，您需要调用通过create道具的positionStrategy方法：

@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 覆盖服务和类。

Overlay demo

如果您更喜欢指令方式请查看此媒体文章并查看应用指令方式的示例：

Material CDK Overlay with RxJS

Answer 2

我也有类似的经历，我希望菜单打开时菜单触发器（按钮）保持在前台。前提很简单，但是您需要一种方法来在前景中向想要的项目指示叠加层在显示时处于某种状态。就我而言，菜单是“打开”。

为此，我做了三件事：

在您的Component类中创建变量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 demo

如何在将现有组件保留在前台的同时使用CDK覆盖？

2 个答案: