perf(common): optimize NgSwitch default case

relates to #11297
angular · Oct 13, 2016 · fdf4309 · fdf4309
1 parent af996ef
commit fdf4309
Show file tree

Hide file tree

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

diff --git a/modules/@angular/common/test/directives/ng_switch_spec.ts b/modules/@angular/common/test/directives/ng_switch_spec.ts
@@ -50,25 +50,6 @@ export function main() {
            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(() => {
            const template = '<div>' +
                '<ul [ngSwitch]="switchValue">' +
@@ -84,6 +65,9 @@ export function main() {
 
            getComponent().switchValue = 'b';
            detectChangesAndExpectText('when default');
+
+           getComponent().switchValue = 'c';
+           detectChangesAndExpectText('when default');
          }));
 
       it('should support multiple whens with the same value', async(() => {

diff --git a/modules/benchmarks/src/tree/ng2_switch/tree.ts b/modules/benchmarks/src/tree/ng2_switch/tree.ts
@@ -15,6 +15,10 @@ export class TreeComponent {
   data: TreeNode = emptyTree;
 }
 
-@NgModule({imports: [BrowserModule], bootstrap: [TreeComponent], declarations: [TreeComponent]})
+@NgModule({
+  imports: [BrowserModule],
+  bootstrap: [TreeComponent],
+  declarations: [TreeComponent],
+})
 export class AppModule {
 }