mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
chore(tabs): revert workaround for angular < 2.3 (#4076)
This commit is contained in:
committed by
Kara
parent
fe7570a1da
commit
fbfd032c6e
@@ -1,5 +1,5 @@
|
||||
<div class="mat-tab-body-content" #content
|
||||
[@translateTab]="_canBeAnimated ? _position : null"
|
||||
[@translateTab]="_position"
|
||||
(@translateTab.start)="_onTranslateTabStarted($event)"
|
||||
(@translateTab.done)="_onTranslateTabComplete($event)">
|
||||
<ng-template cdkPortalHost></ng-template>
|
||||
|
||||
@@ -170,19 +170,6 @@ describe('MdTabBody', () => {
|
||||
}));
|
||||
});
|
||||
|
||||
it('should toggle the canBeAnimated flag', () => {
|
||||
let fixture: ComponentFixture<SimpleTabBodyApp>;
|
||||
let tabBody: MdTabBody;
|
||||
|
||||
fixture = TestBed.createComponent(SimpleTabBodyApp);
|
||||
tabBody = fixture.componentInstance.mdTabBody;
|
||||
|
||||
expect(tabBody._canBeAnimated).toBe(false);
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(tabBody._canBeAnimated).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -7,9 +7,7 @@ import {
|
||||
OnInit,
|
||||
ElementRef,
|
||||
Optional,
|
||||
ChangeDetectorRef,
|
||||
AfterViewChecked,
|
||||
AfterContentChecked,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
@@ -75,7 +73,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
|
||||
])
|
||||
]
|
||||
})
|
||||
export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked {
|
||||
export class MdTabBody implements OnInit, AfterViewChecked {
|
||||
/** The portal host inside of this container into which the tab body content will be loaded. */
|
||||
@ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;
|
||||
|
||||
@@ -102,9 +100,6 @@ export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked
|
||||
}
|
||||
}
|
||||
|
||||
/** Whether the element is allowed to be animated. */
|
||||
_canBeAnimated: boolean = false;
|
||||
|
||||
/** The origin position from which this tab should appear when it is centered into view. */
|
||||
_origin: MdTabBodyOriginState;
|
||||
|
||||
@@ -120,10 +115,7 @@ export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked
|
||||
}
|
||||
}
|
||||
|
||||
constructor(
|
||||
@Optional() private _dir: Dir,
|
||||
private _elementRef: ElementRef,
|
||||
private _changeDetectorRef: ChangeDetectorRef) { }
|
||||
constructor(@Optional() private _dir: Dir, private _elementRef: ElementRef) { }
|
||||
|
||||
/**
|
||||
* After initialized, check if the content is centered and has an origin. If so, set the
|
||||
@@ -145,27 +137,6 @@ export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* After the content has been checked, determines whether the element should be allowed to
|
||||
* animate. This has to be limited, because under a specific set of circumstances (see #2151),
|
||||
* the animations can be triggered too early, which either crashes Chrome by putting it into an
|
||||
* infinite loop (with Angular < 2.3.0) or throws an error because the element doesn't have a
|
||||
* computed style (with Angular > 2.3.0). This can alternatively be determined by checking the
|
||||
* transform: canBeAnimated = getComputedStyle(element) !== '', however document.contains should
|
||||
* be faster since it doesn't cause a reflow.
|
||||
*/
|
||||
ngAfterContentChecked() {
|
||||
// TODO: This can safely be removed after we stop supporting Angular < 2.4.2. The fix landed via
|
||||
// https://github.com/angular/angular/commit/21030e9a1cf30e8101399d8535ed72d847a23ba6
|
||||
if (!this._canBeAnimated) {
|
||||
this._canBeAnimated = document.body.contains(this._elementRef.nativeElement);
|
||||
|
||||
if (this._canBeAnimated) {
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_onTranslateTabStarted(e: AnimationEvent) {
|
||||
if (this._isCenterPosition(e.toState)) {
|
||||
this.onCentering.emit(this._elementRef.nativeElement.clientHeight);
|
||||
|
||||
Reference in New Issue
Block a user