TypeScript Overlay.create方法代碼示例

本文整理匯總了TypeScript中@angular/cdk/overlay.Overlay.create方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Overlay.create方法的具體用法？TypeScript Overlay.create怎麽用？TypeScript Overlay.create使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@angular/cdk/overlay.Overlay的用法示例。

在下文中一共展示了Overlay.create方法的4個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: ngAfterViewInit

 ngAfterViewInit() {
   this._portal = new TemplatePortal(this._dialogTemplate, this._viewContainerRef);
   this._overlayRef = this._overlay.create({
     positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
     hasBackdrop: true
   });
   this._overlayRef.backdropClick().subscribe(() => this._overlayRef.detach());
 }

開發者ID:Nodarii，項目名稱:material2，代碼行數:8，代碼來源:cdk-drag-drop-root-element-example.ts

示例2: createModal

 // Create component to ApplicationRef
 private createModal(): void {
   this.overlayRef = this.overlay.create();
   this.modalRef = this.overlayRef.attach(new ComponentPortal(NzModalComponent));
 }

開發者ID:，項目名稱:，代碼行數:5，代碼來源:

示例3: attachCodePanel

export function attachCodePanel(
    componentFactoryResolver: ComponentFactoryResolver,
    overlay: Overlay,
    parentInjector: Injector,
) {
    const overlayRef = overlay.create()
    let previousOrigin

    return (editor: EditorService) => {
        const pluginState: CodeBlockState = pluginKey.getState(editor.state)
        const origin = pluginState.element

        if (!pluginState.toolbarVisible) {
            overlayRef.detach()
            return
        }

        const toolbar = new FloatingToolbar(editor, overlayRef)
        const injector = Injector.create({
            parent: parentInjector,
            providers: [
                {
                    provide: FloatingToolbar,
                    useValue: toolbar,
                },
                {
                    provide: EditorToolbar,
                    useValue: toolbar,
                },
            ],
        })
        const linkPanelPortal = new ComponentPortal(CodePanelComponent, null, injector)
        const positions = [
            new ConnectionPositionPair(
                { originX: "center", originY: "bottom" },
                { overlayX: "center", overlayY: "top" },
            ),
        ]

        if (previousOrigin !== origin) {
            overlayRef.detach()
        }

        if (!overlayRef.hasAttached()) {
            overlayRef.attach(linkPanelPortal)

            const strategy = overlay
                .position()
                .flexibleConnectedTo(origin)
                .withFlexibleDimensions(false)
                .withPush(false)
                .withPositions(positions)

            const scrollStrategy = overlay.scrollStrategies.reposition()

            strategy.attach(overlayRef)
            strategy.apply()

            scrollStrategy.attach(overlayRef)
            scrollStrategy.enable()

            overlayRef.updatePositionStrategy(strategy)

            previousOrigin = origin
        }
    }
}

開發者ID:zodiac-team，項目名稱:zodiac-ui，代碼行數:67，代碼來源:code-panel.component.ts

示例4: attachLinkPanel

export function attachLinkPanel(
    componentFactoryResolver: ComponentFactoryResolver,
    overlay: Overlay,
    parentInjector: Injector,
) {
    const overlayRef = overlay.create()

    return (editor: EditorService) => {
        const pluginState: HyperlinkState = pluginKey.getState(editor.state)
        const { link } = editor.state.schema.marks
        let origin
        let previousOrigin

        if (!pluginState.activeLinkMark || !link) {
            overlayRef.detach()
            return
        }

        const toolbar = new FloatingToolbar(editor, overlayRef)
        const injector = Injector.create({
            parent: parentInjector,
            providers: [
                {
                    provide: FloatingToolbar,
                    useValue: toolbar,
                },
                {
                    provide: EditorToolbar,
                    useValue: toolbar,
                },
            ],
        })
        const linkPanelPortal = new ComponentPortal(LinkPanelComponent, null, injector)
        const positions = [
            new ConnectionPositionPair(
                { originX: "start", originY: "bottom" },
                { overlayX: "start", overlayY: "top" },
            ),
            new ConnectionPositionPair(
                { originX: "start", originY: "top" },
                { overlayX: "start", overlayY: "bottom" },
            ),
        ]

        switch (pluginState.activeLinkMark.type) {
            case InsertStatus.EDIT_LINK_TOOLBAR: {
                const el = editor.view.nodeDOM(pluginState.activeLinkMark.pos)
                origin = el.parentElement as HTMLElement

                break
            }
            case InsertStatus.INSERT_LINK_TOOLBAR: {
                const el = editor.view.domAtPos(pluginState.activeLinkMark.from)
                origin = el.node as HTMLElement
                break
            }
            default:
        }

        if (previousOrigin !== origin) {
            overlayRef.detach()
        }

        if (!overlayRef.hasAttached()) {
            overlayRef.attach(linkPanelPortal)

            const strategy = overlay
                .position()
                .flexibleConnectedTo(origin)
                .withFlexibleDimensions(false)
                .withPush(false)
                .withPositions(positions)

            const scrollStrategy = overlay.scrollStrategies.reposition()

            strategy.attach(overlayRef)
            strategy.apply()

            scrollStrategy.attach(overlayRef)
            scrollStrategy.enable()

            overlayRef.updatePositionStrategy(strategy)

            previousOrigin = origin
        }
    }
}

開發者ID:zodiac-team，項目名稱:zodiac-ui，代碼行數:87，代碼來源:link-panel.component.ts

注：本文中的@angular/cdk/overlay.Overlay.create方法示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。