Skip to content

fix(tabs): tab content portal not being cleaned up on destroy #10661

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 5, 2018
Merged

fix(tabs): tab content portal not being cleaned up on destroy #10661

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 20 additions & 22 deletions src/lib/tabs/tab-body.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {TemplatePortal, CdkPortalOutlet, PortalHostDirective} from '@angular/cdk
import {Directionality, Direction} from '@angular/cdk/bidi';
import {Subscription} from 'rxjs';
import {matTabsAnimations} from './tabs-animations';
import {startWith} from 'rxjs/operators';

/**
* These position states are used internally as animation states for the tab body. Setting the
Expand Down Expand Up @@ -59,28 +60,29 @@ export type MatTabBodyOriginState = 'left' | 'right';
selector: '[matTabBodyHost]'
})
export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {
/** A subscription to events for when the tab body begins centering. */
private _centeringSub: Subscription;
/** A subscription to events for when the tab body finishes leaving from center position. */
private _leavingSub: Subscription;
/** Subscription to events for when the tab body begins centering. */
private _centeringSub = Subscription.EMPTY;
/** Subscription to events for when the tab body finishes leaving from center position. */
private _leavingSub = Subscription.EMPTY;

constructor(
_componentFactoryResolver: ComponentFactoryResolver,
_viewContainerRef: ViewContainerRef,
componentFactoryResolver: ComponentFactoryResolver,
viewContainerRef: ViewContainerRef,
@Inject(forwardRef(() => MatTabBody)) private _host: MatTabBody) {
super(_componentFactoryResolver, _viewContainerRef);
super(componentFactoryResolver, viewContainerRef);
}

/** Set initial visibility or set up subscription for changing visibility. */
ngOnInit(): void {
if (this._host._isCenterPosition(this._host._position)) {
this.attach(this._host._content);
}
this._centeringSub = this._host._beforeCentering.subscribe((isCentering: boolean) => {
if (isCentering && !this.hasAttached()) {
this.attach(this._host._content);
}
});
super.ngOnInit();

this._centeringSub = this._host._beforeCentering
.pipe(startWith(this._host._isCenterPosition(this._host._position)))
.subscribe((isCentering: boolean) => {
if (isCentering && !this.hasAttached()) {
this.attach(this._host._content);
}
});

this._leavingSub = this._host._afterLeavingCenter.subscribe(() => {
this.detach();
Expand All @@ -89,13 +91,9 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr

/** Clean up centering subscription. */
ngOnDestroy(): void {
if (this._centeringSub && !this._centeringSub.closed) {
this._centeringSub.unsubscribe();
}

if (this._leavingSub && !this._leavingSub.closed) {
this._leavingSub.unsubscribe();
}
super.ngOnDestroy();
this._centeringSub.unsubscribe();
this._leavingSub.unsubscribe();
}
}

Expand Down