如何将位置策略添加到叠加层？(角度材料)

Question

我如何在ConnectedPositionStrategy叠加层中添加位置策略()？(我正在使用Angular Material.)

我已经尝试通过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

编辑:我已经尝试初始化一个positionStrategy通过new关键字,但现在我不知道如何传递参数作为.:(

Answer 1

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

1 /方法创建在类Overlay not(OverlayContainer)上

2/ConnectedPositionStrategy不是一个对象,它是一个打字稿界面(这就是为什么你得到错误... typeof ConnectedPositionStrategy ...)

那么创建"连接"叠加层的最好方法是使用OverlayPositionBuilder( 这里是文档,但这没有多大帮助)

如果您扫描角度材料仓库,您将看到一些示例,例如在使用的datepicker中:

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

所以你当然可以通过你的组件elementRef替换this._datepickerInput.getPopupConnectionElementRef()来使用这个片段.

 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

经过一些搜索，包括这篇文章。我提供了一个更新的解决方案，用于将 cdk 覆盖用于菜单和其他具有连接位置策略的菜单。（使用灵活，因为连接显示已弃用的装饰）

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>