perf(common): optimize NgSwitch default case

relates to #11297
This commit is contained in:
Victor Berchet 2016-10-12 15:20:22 -07:00 committed by Igor Minar
parent af996ef0c4
commit fdf4309b50
3 changed files with 26 additions and 34 deletions

View File

@ -10,7 +10,7 @@ import {Directive, Host, Input, TemplateRef, ViewContainerRef} from '@angular/co
import {ListWrapper} from '../facade/collection'; import {ListWrapper} from '../facade/collection';
const _CASE_DEFAULT = new Object(); const _CASE_DEFAULT = {};
export class SwitchView { export class SwitchView {
constructor( constructor(
@ -53,8 +53,7 @@ export class SwitchView {
* root elements. * root elements.
* *
* Elements within `NgSwitch` but outside of a `NgSwitchCase` or `NgSwitchDefault` directives will * Elements within `NgSwitch` but outside of a `NgSwitchCase` or `NgSwitchDefault` directives will
* be * be preserved at the location.
* preserved at the location.
* *
* The `ngSwitchCase` directive informs the parent `NgSwitch` of which view to display when the * The `ngSwitchCase` directive informs the parent `NgSwitch` of which view to display when the
* expression is evaluated. * expression is evaluated.
@ -72,18 +71,23 @@ export class NgSwitch {
@Input() @Input()
set ngSwitch(value: any) { set ngSwitch(value: any) {
// Empty the currently active ViewContainers // Set of views to display for this value
this._emptyAllActiveViews();
// Add the ViewContainers matching the value (with a fallback to default)
this._useDefault = false;
let views = this._valueViews.get(value); let views = this._valueViews.get(value);
if (!views) {
this._useDefault = true;
views = this._valueViews.get(_CASE_DEFAULT) || null;
}
this._activateViews(views);
if (views) {
this._useDefault = false;
} else {
// No view to display for the current value -> default case
// Nothing to do if the default case was already active
if (this._useDefault) {
return;
}
this._useDefault = true;
views = this._valueViews.get(_CASE_DEFAULT);
}
this._emptyAllActiveViews();
this._activateViews(views);
this._switchValue = value; this._switchValue = value;
} }
@ -119,7 +123,7 @@ export class NgSwitch {
this._activeViews = []; this._activeViews = [];
} }
private _activateViews(views: SwitchView[]): void { private _activateViews(views?: SwitchView[]): void {
if (views) { if (views) {
for (var i = 0; i < views.length; i++) { for (var i = 0; i < views.length; i++) {
views[i].create(); views[i].create();

View File

@ -50,25 +50,6 @@ export function main() {
detectChangesAndExpectText('when b'); detectChangesAndExpectText('when b');
})); }));
// TODO(robwormald): deprecate and remove
it('should switch amongst when values using switchCase', async(() => {
const template = '<div>' +
'<ul [ngSwitch]="switchValue">' +
'<template ngSwitchCase="a"><li>when a</li></template>' +
'<template ngSwitchCase="b"><li>when b</li></template>' +
'</ul></div>';
fixture = createTestComponent(template);
detectChangesAndExpectText('');
getComponent().switchValue = 'a';
detectChangesAndExpectText('when a');
getComponent().switchValue = 'b';
detectChangesAndExpectText('when b');
}));
it('should switch amongst when values with fallback to default', async(() => { it('should switch amongst when values with fallback to default', async(() => {
const template = '<div>' + const template = '<div>' +
'<ul [ngSwitch]="switchValue">' + '<ul [ngSwitch]="switchValue">' +
@ -84,6 +65,9 @@ export function main() {
getComponent().switchValue = 'b'; getComponent().switchValue = 'b';
detectChangesAndExpectText('when default'); detectChangesAndExpectText('when default');
getComponent().switchValue = 'c';
detectChangesAndExpectText('when default');
})); }));
it('should support multiple whens with the same value', async(() => { it('should support multiple whens with the same value', async(() => {

View File

@ -15,6 +15,10 @@ export class TreeComponent {
data: TreeNode = emptyTree; data: TreeNode = emptyTree;
} }
@NgModule({imports: [BrowserModule], bootstrap: [TreeComponent], declarations: [TreeComponent]}) @NgModule({
imports: [BrowserModule],
bootstrap: [TreeComponent],
declarations: [TreeComponent],
})
export class AppModule { export class AppModule {
} }