12

如何将定位策略 ( 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

此外，我尝试positionStrategy通过new关键字初始化 a ，但现在我不知道将参数传递为什么。

4

2 回答 2

18

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

1/ 方法 create 存在于类 Overlay 上，而不是 (OverlayContainer)

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

那么创建“连接”覆盖的最佳方法是使用 OverlayPositionBuilder （ 这里是文档，但这无济于事）

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

            .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' })
    });
 }
于 2017-12-19T08:47:31.227 回答
14

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

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>
于 2019-11-07T12:08:05.180 回答