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

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

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

---

有什么简单的方法可以做到这一点吗？看起来，

cdkConnectedOverlay

指令可能有用，但我不知道如何使其工作。

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

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

---

非常感谢。如果我正确理解您的答案，它将在覆盖上创建一个新的

UserProfile

组件。但是，如果可能的话，我想在覆盖层上显示一个现有组件，这就是我的问题所在。很抱歉误解。我认为您可以将组件门户更改为模板门户，并在应用程序的不同状态中引用它。[