2

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

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

有没有直接的方法可以做到这一点？该cdkConnectedOverlay指令似乎很有用，但我不知道如何使其工作。

4

1 回答 1

4

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

叠加演示

如果您更喜欢指令方式，请查看这篇中篇文章并查看应用指令方式的示例：

使用 RxJS 的材质 CDK 覆盖

于 2018-05-01T04:59:20.347 回答