Merge pull request #18738 from xg-wang/router-doc

[DOC release] Add note about router service event and property update…
emberjs · Feb 22, 2020 · ac45529 · ac45529
2 parents 6ff9f4d + 9eb6012
commit ac45529
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 10 deletions.
diff --git a/packages/@ember/-internals/routing/lib/services/router.ts b/packages/@ember/-internals/routing/lib/services/router.ts
@@ -464,6 +464,16 @@ export default class RouterService extends Service {
     }
     ```
 
+    `routeDidChange` will be called after any `Route`'s
+    [didTransition](/ember/release/classes/Route/events/didTransition?anchor=didTransition)
+    action has been fired.
+    The updates of properties
+    [currentURL](/ember/release/classes/RouterService/properties/currentURL?anchor=currentURL),
+    [currentRouteName](/ember/release/classes/RouterService/properties/currentURL?anchor=currentRouteName)
+    and
+    [currentRoute](/ember/release/classes/RouterService/properties/currentURL?anchor=currentRoute)
+    are completed at the time `routeDidChange` is called.
+
     @event routeDidChange
     @param {Transition} transition
     @public

diff --git a/packages/ember/tests/routing/router_service_test/currenturl_lifecycle_test.js b/packages/ember/tests/routing/router_service_test/currenturl_lifecycle_test.js
@@ -12,22 +12,98 @@ let ROUTE_NAMES = ['index', 'child', 'sister', 'brother', 'loading'];
 let InstrumentedRoute = Route.extend({
   routerService: injectService('router'),
 
+  init() {
+    this._super(...arguments);
+    let service = get(this, 'routerService');
+    service.on('routeWillChange', transition => {
+      results.push([
+        service.get('currentRouteName'),
+        `${this.routeName} routeWillChange: ${transition.from && transition.from.name} - ${
+          transition.to.name
+        }`,
+        service.get('currentURL'),
+      ]);
+    });
+    service.on('routeDidChange', transition => {
+      results.push([
+        service.get('currentRouteName'),
+        `${this.routeName} routeDidChange: ${transition.from && transition.from.name} - ${
+          transition.to.name
+        }`,
+        service.get('currentURL'),
+      ]);
+    });
+  },
+
+  activate() {
+    let service = get(this, 'routerService');
+    results.push([
+      service.get('currentRouteName'),
+      `${this.routeName} activate`,
+      service.get('currentURL'),
+    ]);
+  },
+
+  redirect() {
+    let service = get(this, 'routerService');
+    results.push([
+      service.get('currentRouteName'),
+      `${this.routeName} redirect`,
+      service.get('currentURL'),
+    ]);
+  },
+
   beforeModel() {
     let service = get(this, 'routerService');
-    results.push([service.get('currentRouteName'), 'beforeModel', service.get('currentURL')]);
+    results.push([
+      service.get('currentRouteName'),
+      `${this.routeName} beforeModel`,
+      service.get('currentURL'),
+    ]);
   },
 
   model() {
     let service = get(this, 'routerService');
-    results.push([service.get('currentRouteName'), 'model', service.get('currentURL')]);
+    results.push([
+      service.get('currentRouteName'),
+      `${this.routeName} model`,
+      service.get('currentURL'),
+    ]);
     return new RSVP.Promise(resolve => {
       setTimeout(resolve, 200);
     });
   },
 
   afterModel() {
     let service = get(this, 'routerService');
-    results.push([service.get('currentRouteName'), 'afterModel', service.get('currentURL')]);
+    results.push([
+      service.get('currentRouteName'),
+      `${this.routeName} afterModel`,
+      service.get('currentURL'),
+    ]);
+  },
+
+  actions: {
+    willTransition(transition) {
+      let service = get(this, 'routerService');
+      results.push([
+        service.get('currentRouteName'),
+        `${this.routeName} willTransition: ${transition.from && transition.from.name} - ${
+          transition.to.name
+        }`,
+        service.get('currentURL'),
+      ]);
+      return true;
+    },
+    didTransition() {
+      let service = get(this, 'routerService');
+      results.push([
+        service.get('currentRouteName'),
+        `${this.routeName} didTransition`,
+        service.get('currentURL'),
+      ]);
+      return true;
+    },
   },
 });
 
@@ -105,15 +181,26 @@ moduleFor(
         });
     }
 
-    ['@test RouterService#currentURL is not set during lifecycle hooks'](assert) {
+    ['@test RouterService#currentURL is not set during model lifecycle hooks until routeDidChange'](
+      assert
+    ) {
       assert.expect(2);
 
       return this.visit('/')
         .then(() => {
           assert.deepEqual(results, [
-            [null, 'beforeModel', null],
-            [null, 'model', null],
-            ['parent.loading', 'afterModel', '/'],
+            [null, 'parent.index routeWillChange: null - parent.index', null],
+            [null, 'parent.index beforeModel', null],
+            [null, 'parent.index model', null],
+            [null, 'parent.loading activate', null],
+            [null, 'parent.loading routeWillChange: null - parent.loading', null],
+            [null, 'parent.index routeWillChange: null - parent.loading', null],
+            ['parent.loading', 'parent.index afterModel', '/'],
+            ['parent.loading', 'parent.index redirect', '/'],
+            ['parent.loading', 'parent.index activate', '/'],
+            ['parent.loading', 'parent.index didTransition', '/'],
+            ['parent.index', 'parent.loading routeDidChange: null - parent.index', '/'],
+            ['parent.index', 'parent.index routeDidChange: null - parent.index', '/'],
           ]);
 
           results = [];
@@ -122,9 +209,27 @@ moduleFor(
         })
         .then(() => {
           assert.deepEqual(results, [
-            ['parent.index', 'beforeModel', '/'],
-            ['parent.index', 'model', '/'],
-            ['parent.loading', 'afterModel', '/child'],
+            ['parent.index', 'parent.index willTransition: parent.index - parent.child', '/'],
+            ['parent.index', 'parent.child routeWillChange: parent.index - parent.child', '/'],
+            ['parent.index', 'parent.loading routeWillChange: parent.index - parent.child', '/'],
+            ['parent.index', 'parent.index routeWillChange: parent.index - parent.child', '/'],
+            ['parent.index', 'parent.child beforeModel', '/'],
+            ['parent.index', 'parent.child model', '/'],
+            ['parent.index', 'parent.loading activate', '/'],
+            ['parent.index', 'parent.child routeWillChange: parent.index - parent.loading', '/'],
+            ['parent.index', 'parent.loading routeWillChange: parent.index - parent.loading', '/'],
+            ['parent.index', 'parent.index routeWillChange: parent.index - parent.loading', '/'],
+            ['parent.loading', 'parent.child afterModel', '/child'],
+            ['parent.loading', 'parent.child redirect', '/child'],
+            ['parent.loading', 'parent.child activate', '/child'],
+            ['parent.loading', 'parent.child didTransition', '/child'],
+            ['parent.child', 'parent.child routeDidChange: parent.index - parent.child', '/child'],
+            [
+              'parent.child',
+              'parent.loading routeDidChange: parent.index - parent.child',
+              '/child',
+            ],
+            ['parent.child', 'parent.index routeDidChange: parent.index - parent.child', '/child'],
           ]);
         });
     }