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 ...）

然后是创建＆＃34;连接＆＃34;的最佳方式。 overlay是使用OverlayPositionBuilder（here the doc, but this will not help much）

如果您扫描角度材料仓库，您会看到一些示例，例如使用的日期选择器：

            .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>

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

2 个答案:

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

2 个答案:

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