web-dev-qa-db-ja.com

オーバーレイにポジション戦略を追加するにはどうすればよいですか？ （角度のある素材）

いったいどうやってポジション戦略（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'.

私は何かが足りないのですか？ドキュメントは、ポジション戦略を指定するためのhowについてあまり明確ではありません。

これが私の依存関係です（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を初期化しようとしましたが、引数を何として渡すかがわかりません。 :(

angularangular-materialangular-cdk
5
Edric

あなたの例には少なくとも2つのエラーがあります：

1 /メソッドcreateはクラスOverlayに存在しません（OverlayContainer）

2/ConnectedPositionStrategyはオブジェクトではなく、TypeScriptインターフェイスです（エラーが発生する理由... typeof ConnectedPositionStrategy ...）

次に、「接続された」オーバーレイを作成する最良の方法は、OverlayPositionBuilderを使用することです（ ここではドキュメントですが、これはあまり役に立ちません ）

angularマテリアルリポジトリをスキャンすると、次を使用するdatepickerのような例が表示されます。

            .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' })
    });
 }
16
Pierre Mallet

この投稿を含むいくつかの検索の後。メニューなどに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>
3
Jorge Del Castillo