如何将定位策略添加到Angular CDK覆盖图? [英] How do I add a position strategy to an Angular CDK overlay?

问题描述

如何为Angular CDK覆盖添加定位策略(ConnectedPositionStrategy)?

How do I add a positioning strategy (ConnectedPositionStrategy) to an Angular CDK overlay?

我尝试通过positionStrategy属性指定它，并将其传递到overlay.create().

I've tried specifying it via the positionStrategy property and passed it into overlay.create().

import { Overlay, ConnectedPositionStrategy } from '@angular/cdk/overlay';
// ...
export class MyComponent {
    constructor(private overlay: Overlay){}
    showOverlay() {
        let overlay = this.overlay.create({positionStrategy: ConnectedPositionStrategy});
        // ...
    }
}

但是我得到这个错误:

ERROR in src/app/explore/explore.component.ts(48,40): error TS2345: Argument of type '{ positionStrategy: typeof ConnectedPositionStrategy; }' is not assignable to parameter of type 'OverlayConfig'.
  Types of property 'positionStrategy' are incompatible.
    Type 'typeof ConnectedPositionStrategy' is not assignable to type 'PositionStrategy'.
      Property 'attach' is missing in type 'typeof ConnectedPositionStrategy'.

我错过了什么吗?文档对于如何指定定位策略还不太清楚.

Am I missing something? The docs aren't very clear about how to specify a positioning strategy.

这是我的依赖项(从ng version输出):

Here are my dependencies (outputted from ng version):

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.1
Node: 8.9.0
OS: darwin x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker

@angular/cdk: 5.0.1-2436acd
@angular/cli: 1.6.1
@angular/flex-layout: 2.0.0-beta.12-82ae74c
@angular/material: 5.0.1-2436acd
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

此外，我尝试通过new关键字初始化positionStrategy，但是现在我不知道该如何传递参数.

Additionally, I've tried initializing a positionStrategy via the new keyword, but now I've no idea what to pass the arguments as.

推荐答案

您的示例中至少存在两个错误:

there is at least two errors in your example :

1/创建的方法存在于Overlay类(OverlayContainer)上

1/ the method create exist on class Overlay not (OverlayContainer)

2/ConnectedPositionStrategy不是对象，它是打字稿界面 (这就是为什么会出现错误... typeof ConnectedPositionStrategy ...)

2/ ConnectedPositionStrategy is not an object, its a typescript interface ( that why you get error ... typeof ConnectedPositionStrategy ... )

然后，创建已连接"叠加层的最佳方法是使用OverlayPositionBuilder(此处的文档，但这无济于事)

then the best way to create a "connected" overlay is to use the OverlayPositionBuilder ( here the doc, but this will not help much )

如果您扫描有角度的材料回购，您将看到一些示例，例如在使用日期选择器的人中:

If you scan angular material repo you will see some example, like in the datepicker who use :

            .connectedTo(this._datepickerInput.getPopupConnectionElementRef(), { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })

因此您当然可以使用此代码段，方法是将这个._datepickerInput.getPopupConnectionElementRef()替换为组件elementRef

so you can certainly use this snippet by replacing this._datepickerInput.getPopupConnectionElementRef() by your component elementRef

 constructor (
 ...
 private overlay: Overlay
 ) {}

showOverlay() {
    let overlay = this.overlay.create({
        positionStrategy: this.overlay.position().connectedTo(<yourElRef>, { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })
    });
 }

这篇关于如何将定位策略添加到Angular CDK覆盖图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！