feat(common): add ability to retrieve the state from Location service (#30055)

Previously there wasn't a way to retrieve `history.state` from the `Location` service. The only time the framework exposed this value was in navigation events. This meant if you weren't using the Angular router, there wasn't a way to get access to this `history.state` value other than going directly to the DOM.

This PR adds an API to retrieve the value of `history.state`. This will be useful and needed to provide a backwards-compatible `Location` service that can emulate AngularJS's `$location` service since we will need to be able to read the state data in order to produce AngularJS location transition events.

This feature will additionally be useful to any application that wants to access state data through Angular rather than going directly to the DOM APIs.

PR Close #30055

packages/common/testing/src/location_mock.ts

@@ -34,7 +34,7 @@ export class SpyLocation implements Location {
 
   path(): string { return this._history[this._historyIndex].path; }
 
-  private state(): string { return this._history[this._historyIndex].state; }
+  getState(): unknown { return this._history[this._historyIndex].state; }
 
   isCurrentPathEqualTo(path: string, query: string = ''): boolean {
     const givenPath = path.endsWith('/') ? path.substring(0, path.length - 1) : path;
@@ -100,14 +100,14 @@ export class SpyLocation implements Location {
   forward() {
     if (this._historyIndex < (this._history.length - 1)) {
       this._historyIndex++;
-      this._subject.emit({'url': this.path(), 'state': this.state(), 'pop': true});
+      this._subject.emit({'url': this.path(), 'state': this.getState(), 'pop': true});
     }
   }
 
   back() {
     if (this._historyIndex > 0) {
       this._historyIndex--;
-      this._subject.emit({'url': this.path(), 'state': this.state(), 'pop': true});
+      this._subject.emit({'url': this.path(), 'state': this.getState(), 'pop': true});
     }
   }
 

packages/common/testing/src/mock_location_strategy.ts

@@ -25,6 +25,7 @@ export class MockLocationStrategy extends LocationStrategy {
   urlChanges: string[] = [];
   /** @internal */
   _subject: EventEmitter<any> = new EventEmitter();
+  private stateChanges: any[] = [];
   constructor() { super(); }
 
   simulatePopState(url: string): void {
@@ -42,6 +43,9 @@ export class MockLocationStrategy extends LocationStrategy {
   }
 
   pushState(ctx: any, title: string, path: string, query: string): void {
+    // Add state change to changes array
+    this.stateChanges.push(ctx);
+
     this.internalTitle = title;
 
     const url = path + (query.length > 0 ? ('?' + query) : '');
@@ -52,6 +56,9 @@ export class MockLocationStrategy extends LocationStrategy {
   }
 
   replaceState(ctx: any, title: string, path: string, query: string): void {
+    // Reset the last index of stateChanges to the ctx (state) object
+    this.stateChanges[(this.stateChanges.length || 1) - 1] = ctx;
+
     this.internalTitle = title;
 
     const url = path + (query.length > 0 ? ('?' + query) : '');
@@ -68,12 +75,15 @@ export class MockLocationStrategy extends LocationStrategy {
   back(): void {
     if (this.urlChanges.length > 0) {
       this.urlChanges.pop();
+      this.stateChanges.pop();
       const nextUrl = this.urlChanges.length > 0 ? this.urlChanges[this.urlChanges.length - 1] : '';
       this.simulatePopState(nextUrl);
     }
   }
 
   forward(): void { throw 'not implemented'; }
+
+  getState(): unknown { return this.stateChanges[(this.stateChanges.length || 1) - 1]; }
 }
 
 class _MockPopStateEvent {