如何将头寸策略添加到 Angular CDK 叠加层？

Question

如何将定位策略 (ConnectedPositionStrategy) 添加到 Angular CDK 叠加层？

我尝试通过 positionStrategy 属性指定它并将其传递给 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'.

我错过了什么吗？关于如何指定定位策略，文档不是很清楚。

这是我的依赖项（从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，但现在我不知道将参数作为什么传递。

Answer 1

您的示例中至少有两个错误：

1/ 创建方法存在于 class 覆盖不（OverlayContainer）

2/ ConnectedPositionStrategy 不是一个对象，它是一个打字稿接口（这就是为什么你得到错误... typeof ConnectedPositionStrategy ... ）

那么创建 "connected" 叠加层的最佳方法是使用 OverlayPositionBuilder ( here the doc, but this will not help much )

如果你扫描 angular material 回购你会看到一些例子，比如在日期选择器中使用：

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

因此您当然可以通过将 this._datepickerInput.getPopupConnectionElementRef() 替换为您的组件 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' })
    });
 }

Answer 2

经过一些搜索后 post。我提供了一个更新的解决方案，用于将 cdk overlay 用于菜单和其他具有连接位置策略的菜单。（使用 flexible since conected show deprecated decoration）

const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(elementRef)
      .withPositions([{
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'top',
      }, {
        originX: 'start',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'bottom',
      }]);

然后根据需要添加滚动策略，例如重新定位，以防您希望菜单在滚动时重新定位

scrollStrategy: this.overlay.scrollStrategies.reposition()

但是如果你的滚动条不在主体上，你需要添加来自

的cdk-scrollable指令

import {ScrollingModule} from '@angular/cdk/scrolling';

到

<div class="your-scroll-container" cdk-scrollable>

如何将头寸策略添加到 Angular CDK 叠加层？

How do I add a position strategy to an Angular CDK overlay?

angular

angular-cdk