なぜオーバーレイ？
カバーオーバーレイ中国語の翻訳の意味が、それはあなたがはるかに少ないコードを書くことができます、独自のコンポーネントライブラリを開発する場合は特に、使いやすい、このシナリオで角パッケージのための材料設計コンポーネント、動的コンテンツのための強力なポップです基本的にオーバーレイを使用することができポップ・シーンの内容として長いといえる。
ポップシーンで私たち自身のコンポーネントライブラリは基本的に、このようなカスタムを選択し、Cascader、ツリーを選択し、ツールチップとして、オーバーレイを使用している 、ダイアログなど、最も重要な2点をまとめたものメリット：
- ユーザーは、パラメータの設定を介してコンテンツのローカライズを実現するために、もはや退屈な、単純な位置を計算することを可能にし、位置に関するさまざまな情報が考慮されています。
- ポップアップコンテンツコンポーネントは、オーバーレイは、このような相互などの問題をカバーし、互換性のない生産その実施を避ける達成するために使用されています。
簡単な例 - ソースポップの結合位置
オーバーレイの使用を実証するために、次のサンプルコードによって、このシナリオでは、ポップアップツールチップと同様であり、ポップアップオーバーレイコンテンツは、ソース原点素子の基準位置に基づいています。
インストールとインポートモジュール
プロジェクトがインストールされていない場合はCDK、最初のインストール
npm install @angular/cdk
复制代码インポートOverlayModule
import {OverlayModule} from '@angular/cdk/overlay';
@NgModule({
imports: [
OverlayModule,
// ...
]
})
export class AppModule {
}
复制代码テンプレートのコンテンツの例
<div class="demo-trigger">
<!--触发位置源-->
<button mat-raised-button
cdkOverlayOrigin
type="button"
[disabled]="overlayRef"
(click)="openWithConfig()">Open</button>
</div>
<!--弹出动态内容模板-->
<ng-template #overlay>
<div class="demo-overlay">
<div style="overflow: auto;">
<ul><li *ngFor="let item of itemArray; index as i">{{itemText}} {{i}}</li></ul>
</div>
</div>
</ng-template>
复制代码またポップアップテンプレートを、テンプレートは、上記オープンボタンは、ソース原点位置としてバックの使用にあります
インジェクションオーバーレイサービス
オーバーレイサービスコンストラクタ・インジェクション・アセンブリ・コンストラクタ、コードアセンブリの定義は、以下の備え
@Component({
selector: 'overlay-demo',
templateUrl: 'connected-overlay-demo.html'
})
export class ConnectedOverlayDemo {
@ViewChild(CdkOverlayOrigin, {static: false}) _overlayOrigin: CdkOverlayOrigin;
@ViewChild('overlay', {static: false}) overlayTemplate: TemplateRef<any>;
/**
* 注入Overlay服务
*/
constructor(
public overlay: Overlay) { }
openWithConfig() {
}
}
复制代码上記のコードを通して注入処理サービスViewChildテンプレート二つのオブジェクト、説明に戻って取得するために使用された場合。
建物の場所ポリシー
まず、あるここで使用されるポリシーの位置を、作成しFlexibleConnectedPositionStrategyたコードを見て、戦略
const positionStrategy = this.overlay.position()
.flexibleConnectedTo(this._overlayOrigin.elementRef)
.withPositions([
{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
}
]);
复制代码作成FlexibleConnectedPositionStrategy方法戦略はflexibleConnectedTo元の位置パラメータを提供する必要があり、ここで使用されているthis._overlayOrigin.elementRef場所の内容を育てるために元の位置に基づいており、this._overlayOriginが実際ViewChildに取り込まれるボタンテンプレートを開きます。
作成メソッドを呼び出します
this.overlayRef = this.overlay.create({
positionStrategy, // 位置策略
scrollStrategy: this.overlay.scrollStrategies.reposition(), // 滚动策略
direction: this.dir.value, // 可用性方面的设置，不用太关注
minWidth: 200, // overlay层的最小宽度
minHeight: 50 // overlay层的最小高度
hasBackdrop: false // 是否显示遮罩层
});
复制代码この方法は、overlayRefオーバーレイによって管理され、オブジェクトOverlayRef overlayRefの種類を生成します。
overlayRefによる追加テンプレート
次のように準備ができたら、ここにあなたがポップアップを表示するには、内容にオーバーレイ層を伝えるために必要なものだ、直接テンプレートで定義されたポップアップテンプレートは、ここで使用される方法はoverlayRefを添付することで、コードがあります
this.overlayRef.attach(new TemplatePortal(this.overlayTemplate, this.viewContainerRef));
复制代码で、this.overlayTemplateで使用されるコードViewChildテンプレート定義の内容は、取るためにポップアップを表示します。
注：この方法はProtals内CDKを使用して添付するメソッドのパラメータの型が実際にTemplatePortalを受信した添付し、このすべては、動的コンポーネントを作成することです後、加えて、それはまた、コンポーネントタイプComponentPortalをサポートしているため、ポータルは私の以前の記事を参照することができますについてzhuanlan.zhihu.com/p/59719621
上記のいくつかの簡単な手順に動的コンテンツを開く、次のような効果が図2に示されています。
簡単な例 - グローバルポップ
上記とは全く異なるが、今やコンテンツのオーバーレイのポップアップウィンドウを経由して直接導入の下で、ソースの任意の位置にリンクされていない、非常に単純なだけで、コードの外観を使用して、ポリシーの下の位置、新しい場所のポリシーを変更する必要があります
const positionStrategy = this.overlay.position()
.global()
.height('300px')
.centerHorizontally()
.top('70px');
复制代码コールglobal()のリターンは、グローバルな場所戦略であるGlobalPositionStrategyブラウザウィンドウ絶対位置の位置に基づいて、ポリシー。
上記目的を達成するためにコード：中間レベル、上から70ピクセル、図の効果以下。
オーバーレイ場所ポリシー
三つの方法によって提供されるオーバーレイOverlayPositionBuilderサービスは三つの位置のポリシーに対応する、OverlayPositionBuilderオーバーレイサービスがコンストラクタに注入、前のコードは、this.overlay.position()オブジェクトタイプによって返されるOverlayPositionBuilder
ConnectedPositionStrategy - 接続点戦略
注：このポリシーは、所定の位置にFlexibleConnectedPositionStrategy戦略を使用して、廃止されていますが、ここでの議論は、接続点との位置関係を説明するために続けることができます
connectedToこの方法は、次のようにポリシーコードが作成、ConnectedPositionStrategyポリシーインスタンス、オーバーレイ層を排出する点光源の動作位置上の点との位置関係に基づいて、ポリシーの実装戦略接続位置を返します
connectedTo(
elementRef: ElementRef,
originPos: OriginConnectionPosition,
overlayPos: OverlayConnectionPosition): ConnectedPositionStrategy {
return new ConnectedPositionStrategy(
originPos, overlayPos, elementRef, this._viewportRuler, this._document, this._platform,
this._overlayContainer);
}
复制代码パラメータは以下のとおりです。
- 接続するElementRef要素は、典型的には、ポップアップ要素をトリガ
- 接続要素の点のoriginPos位置
- ポイントoverlayPosオーバーレイの位置
マップとの関係を維持するために、その位置を表します
上に示した地点の組み合わせが一つだけの場合である（左下のポイント - 左上点）以下のように、位置コードが配置されています
{
"originX": "start",
"originY": "bottom",
"overlayX": "start",
"overlayY": "top"
}
复制代码次のようにx方向の値が定義されて列挙することができます
export type HorizontalConnectionPos = 'start' | 'center' | 'end';
复制代码y方向の値を列挙することができます
export type VerticalConnectionPos = 'top' | 'center' | 'bottom';
复制代码位置の種々の組み合わせは、上記列挙された値に基づいて達成されてもよいです。
FlexibleConnectedPositionStrategy - 柔軟な接続ポイント戦略
注意：これは、今、最終的にFlexibleConnectedPositionStrategy戦略を関連付けることによって達成したソースコードConnectedPositionStrategy戦略で、直接この戦略を使用することをお勧めします
flexibleConnectedToFlexibleConnectedPositionStrategyポリシーインスタンスを返すメソッド、これは最も複雑なオーバーレイ場所のポリシーである、それは使用オーバーレイコマンドによって、柔軟に重量を量ることができますこの戦略を使用することです、それは政策の位置をより細かく制御、次の機能があります。
withDefaultOffsetX、withDefaultOffsetY配置されているのは、基準位置からの相対オフセット。withPositionsポップアップ組成物のコンテンツ・ウィンドウを越えた位置は、他のコンテンツの組み合わせに対応する位置を回避するために適用されるConnectionPositionPairパラメータ型アレイ、位置の組み合わせの様々な、見えません。withFlexibleDimensionsポップアップの幅と高さがブラウザウィンドウ内に制限され、パラメータがトゥーレ、幅と高さに設定されているか否かをオーバーレイレイヤコントロールは、スクロールバーの形で、ブラウザのエッジに適応されるコンテンツを示します。- 態様のような予測可能な位置の他の処理内容
ポリシーを作成するには、以下のコード
/**
* Creates a flexible position strategy.
* @param origin Origin relative to which to position the overlay.
*/
flexibleConnectedTo(origin: FlexibleConnectedPositionStrategyOrigin):
FlexibleConnectedPositionStrategy {
return new FlexibleConnectedPositionStrategy(origin, this._viewportRuler, this._document,
this._platform, this._overlayContainer);
}
复制代码一つだけ、原点パラメータ、参照をリンクするソース要素の場所を提供します。
GlobalPositionStrategy
グローバルロケーションポリシーは、globalこの方法は、ポリシー・コードを作成するために、パラメータなし、GlobalPositionStrategyポリシーインスタンスを返す以下の通りであります
/**
* Creates a global position strategy.
*/
global(): GlobalPositionStrategy {
return new GlobalPositionStrategy();
}
复制代码種々の方法は、全地球測位をGlobalPositionStrategy、次のコード、チェーンを介して呼び出すことができます
const strategy = this.overlay
.position()
.global()
.width('500px')
.height('100px')
.centerHorizontally()
.centerVertically();
复制代码ありtop、left、bottom、rightランク付けパラメータは10pxのあるような方法は、すべての方向に絶対位置を提供し、パラメータは、この方向のオフセット値で'10px'オフセット水平方向または垂直方向のブレークを中心とします、。
PositionStrategyロケーションポリシーインターフェース
次のように場所ポリシーインタフェースが定義されています
import {OverlayReference} from '../overlay-reference';
/** Strategy for setting the position on an overlay. */
export interface PositionStrategy {
/** 附加位置策略到overlay */
attach(overlayRef: OverlayReference): void;
/** 更新overlay element 元素的位置. */
apply(): void;
/** 当overlay调用detach时调用 */
detach?(): void;
/** Cleans up any DOM modifications made by the position strategy, if necessary. */
dispose(): void;
}
复制代码インタフェースは、メソッド・ロケーション・ポリシーは、抽象オブジェクト指向プログラミングの一般的な方法で署名を含まなければならない規定します。
また、独自の場所ポリシーを実現する必要がある場合、インスタンスの作成に依存し、特定のポリシーの実装を指定せずにのみPositionStrategyインタフェースを頼る達成にOverlayRef、（通常作成オーバーレイの間）は、特定の場所の戦略を提供する必要がOverlayRefそして唯一の戦略を実装する必要があり、このインタフェースの特定の実装がインタフェースシグネチャを定義し、その位置を実現します。
オブジェクト指向の三つの特徴に合わせて封装、继承、多态5つの原則に沿って单一职责原则、 开放封闭原则そのような抽象的なアイデアの価値の学習
スクロールポリシー
オーバーレイは、グローバルなサービスを提供しScrollStrategyOptions、それとともにオーバーレイスクロールで作業する場合の処理戦略を提供します。
NoopScrollStrategy - 任意の治療を提供していません。
スクロールは何もしないで、呼び出すメソッドをscrollStrategiesnoop
noop = () => new NoopScrollStrategy();
复制代码CloseScrollStrategy - スクロールポリシーを閉じます
ユーザーが行動をスクロールしたら、すぐに呼び出して、オーバーレイ層爆弾をオフにする方法をscrollStrategiesclose
close = (config?: CloseScrollStrategyConfig) => new CloseScrollStrategy(this._scrollDispatcher,
this._ngZone, this._viewportRuler, config)
复制代码あなたは、設定でパラメータを設定することができthreshold、距離をスクロールして、このパラメータは、オーバーレイを閉じる場合にのみ、スクロールピクセル臨界点を設定し、。
BlockScrollStrategy - ポリシーを転がりストップ
このポリシーは、呼び出し、ページレベルのスクロールを防ぐことができます方法をscrollStrategiesblock
block = () => new BlockScrollStrategy(this._viewportRuler, this._document);
复制代码ページが増加スタイルをHTMLにタグによってcdk-global-scrollblock次のようにページレベルのスクロール形式が定義されているブロックするように
position: fixed;
width: 100%;
overflow-y: scroll;
复制代码RepositionScrollStrategy - 再配置スクロールポリシー
ユーザが行動をスクロールした後、ポリシーがポップアップ層のスクロール位置に応じて更新され、効果がポップアップを呼び出し、同一のソースの位置に対する圧延及び圧延を、続くことである方法をscrollStrategiesreposition
reposition = (config?: RepositionScrollStrategyConfig) => new RepositionScrollStrategy(
this._scrollDispatcher, this._viewportRuler, this._ngZone, config)
复制代码2つのパラメータを設定することができます設定、scrollThrottleパラメータは、スクロールイベントトリガジッタ周波数再位置更新を制御するautoCloseイベントをスクロールすると、オーバーレイ弾性層をクローズするかどうか発生したときにパラメータ設定を（達成近いスクロール戦略関数）
スクロールトリガー
CDKは、スクロール処理サービスを提供するかどうかまたはオーバーレイオーバーレイの位置を閉じ更新し、あなたは（CDK /スクロールディレクトリの下）を使用するトリガイベントを検出するためにスクロールする必要があり、主に使用されScrollDispatcher、圧延工程は、グローバルイベントをトリガします。
閉じますスクロール戦略とスクロールポリシーを再配置が ScrollDispatcherを購読しているscrolled（後にスクロール統一ストリームと呼ばれる）は、ストリームはこのメソッドから返され、クリアするいくつかのポイントがあります
- スクロールグローバルページの文書は、確かにスクロール流れをトリガします
- 上のオーバーレイ表示の背景（マスク層）かどうかを再配置スクロールポリシーの影響は、ローカル要素のスクロール表示の背景を防ぐことができます、全体のページの文書のスクロールに影響はありませんので、あなたは、公式のオーバーレイの例は、背景を示していても、効果を見ることができます層は、まだ動作再配置が、彼らは転がりオーバーレイを実装するときに地元のスクロールイベントがトリガすることができないので、従うことを失敗することがあります。
- スクロールの流れがグローバルローリングリスンあり、CdkScrollableスクロールの注入に関連したすべての要素がスクロール流れをトリガーする（オーバーレイを行うには、スクロール何もあれば、それは位置には影響を与えない計算や、元の位置の後に再計算されますが、この感覚がします最適化）
地元の再配置を達成するために、オーバーレイ層の転動体
国内のソフトウェアのほとんどはウィンドウ全体を修正することであるため、ローカル要素でスタイルを設定しoverflow:scroll、ここだけのアイデア、コンテンツのスクロールを実現
- 閉じる背景には、閉鎖するような背景のオーバーレイをクリックして、彼らは自分の道具を必要とします
- スクロール領域に応じて、コード要素スクロール原点親要素を横断するために使用することができるCdkScrollable構成例
これはオーバーレイ、スクロール、位置戦略では、スクロールの戦略を組み合わせた、非常に抽象的、理解することはそれほど簡単ではありません、今あなたが詳細を知るために必要なソースコードを見て、その後、理解することが最初に行うことができます。
概要
テキストオーバーレイを使用することの利点を紹介し、オーバーレイで私たちのコンポーネントライブラリで使用されるこれらのコンポーネントを持って、その後、オーバーレイは、単純な例のコードを見つけるためにあなたを取る使用し、別の位置に続いて、希望をオーバーレイ戦略と戦術ローリングを紹介いくつかの助けあなたの最後を参照してください。
オーバーレイあまり言うべき内容の必要性が、全体のパッケージは、学習非常に価値があると思った、ここではそんなに簡単な紹介があり、任意の提案や質問があるメッセージの議論を残してください。
さらなる例は、デモオーバーレイに対する角度のために実質的に材料設計のコンポーネントで提供され、コード自体のクローンを学ぶ必要があります
実行例の
gitのクローンgithub.com/angular/com ...
CDコンポーネントの
グローバル糸ホールド糸の必要性をインストールしないように求められた場合は糸//、ノードが必要とするバージョン10.xの
NPMのRUNのApp-devの
著者：WorktileエンジニアヤンZhenxing
ます。https：//juejin.im/post/5d01ae7de51d454f73356d32で再現