mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(overlay): error when rendering flexible overlay on the server (#11072)
This commit is contained in:
committed by
Joey Perrott
parent
294ba3c806
commit
422d1024b4
@@ -19,6 +19,7 @@ import {
|
||||
} from './connected-position';
|
||||
import {FlexibleConnectedPositionStrategy} from './flexible-connected-position-strategy';
|
||||
import {PositionStrategy} from './position-strategy';
|
||||
import {Platform} from '@angular/cdk/platform';
|
||||
|
||||
|
||||
/**
|
||||
@@ -60,14 +61,16 @@ export class ConnectedPositionStrategy implements PositionStrategy {
|
||||
overlayPos: OverlayConnectionPosition,
|
||||
connectedTo: ElementRef,
|
||||
viewportRuler: ViewportRuler,
|
||||
document: Document) {
|
||||
document: Document,
|
||||
// @deletion-target 7.0.0 `platform` parameter to be made required.
|
||||
platform?: Platform) {
|
||||
|
||||
// Since the `ConnectedPositionStrategy` is deprecated and we don't want to maintain
|
||||
// the extra logic, we create an instance of the positioning strategy that has some
|
||||
// defaults that make it behave as the old position strategy and to which we'll
|
||||
// proxy all of the API calls.
|
||||
this._positionStrategy =
|
||||
new FlexibleConnectedPositionStrategy(connectedTo, viewportRuler, document)
|
||||
new FlexibleConnectedPositionStrategy(connectedTo, viewportRuler, document, platform)
|
||||
.withFlexibleDimensions(false)
|
||||
.withPush(false)
|
||||
.withViewportMargin(0);
|
||||
|
||||
@@ -20,6 +20,7 @@ import {Observable, Subscription, Subject} from 'rxjs';
|
||||
import {OverlayRef} from '../overlay-ref';
|
||||
import {isElementScrolledOutsideView, isElementClippedByScrolling} from './scroll-clip';
|
||||
import {coerceCssPixelValue} from '@angular/cdk/coercion';
|
||||
import {Platform} from '@angular/cdk/platform';
|
||||
|
||||
|
||||
// TODO: refactor clipping detection into a separate thing (part of scrolling module)
|
||||
@@ -119,7 +120,9 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
|
||||
constructor(
|
||||
private _connectedTo: ElementRef,
|
||||
private _viewportRuler: ViewportRuler,
|
||||
private _document: Document) {
|
||||
private _document: Document,
|
||||
// @deletion-target 7.0.0 `_platform` parameter to be made required.
|
||||
private _platform?: Platform) {
|
||||
this._origin = this._connectedTo.nativeElement;
|
||||
}
|
||||
|
||||
@@ -155,8 +158,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
|
||||
* @docs-private
|
||||
*/
|
||||
apply(): void {
|
||||
// We shouldn't do anything if the strategy was disposed.
|
||||
if (this._isDisposed) {
|
||||
// We shouldn't do anything if the strategy was disposed or we're on the server.
|
||||
if (this._isDisposed || (this._platform && !this._platform.isBrowser)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -285,7 +288,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
|
||||
* allows one to re-align the panel without changing the orientation of the panel.
|
||||
*/
|
||||
reapplyLastPosition(): void {
|
||||
if (!this._isDisposed) {
|
||||
if (!this._isDisposed && (!this._platform || this._platform.isBrowser)) {
|
||||
this._originRect = this._origin.getBoundingClientRect();
|
||||
this._overlayRect = this._pane.getBoundingClientRect();
|
||||
this._viewportRect = this._getNarrowedViewportRect();
|
||||
|
||||
@@ -8,11 +8,12 @@
|
||||
|
||||
import {ViewportRuler} from '@angular/cdk/scrolling';
|
||||
import {DOCUMENT} from '@angular/common';
|
||||
import {ElementRef, Inject, Injectable} from '@angular/core';
|
||||
import {ElementRef, Inject, Injectable, Optional} from '@angular/core';
|
||||
import {OriginConnectionPosition, OverlayConnectionPosition} from './connected-position';
|
||||
import {ConnectedPositionStrategy} from './connected-position-strategy';
|
||||
import {FlexibleConnectedPositionStrategy} from './flexible-connected-position-strategy';
|
||||
import {GlobalPositionStrategy} from './global-position-strategy';
|
||||
import {Platform} from '@angular/cdk/platform';
|
||||
|
||||
|
||||
/** Builder for overlay position strategy. */
|
||||
@@ -20,7 +21,9 @@ import {GlobalPositionStrategy} from './global-position-strategy';
|
||||
export class OverlayPositionBuilder {
|
||||
constructor(
|
||||
private _viewportRuler: ViewportRuler,
|
||||
@Inject(DOCUMENT) private _document: any) { }
|
||||
@Inject(DOCUMENT) private _document: any,
|
||||
// @deletion-target 7.0.0 `_platform` parameter to be made required.
|
||||
@Optional() private _platform?: Platform) { }
|
||||
|
||||
/**
|
||||
* Creates a global position strategy.
|
||||
@@ -51,7 +54,8 @@ export class OverlayPositionBuilder {
|
||||
* @param elementRef
|
||||
*/
|
||||
flexibleConnectedTo(elementRef: ElementRef): FlexibleConnectedPositionStrategy {
|
||||
return new FlexibleConnectedPositionStrategy(elementRef, this._viewportRuler, this._document);
|
||||
return new FlexibleConnectedPositionStrategy(elementRef, this._viewportRuler, this._document,
|
||||
this._platform);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user