AngularJS 2 стратегия скрытого местоположения назад навигация

Question

Я внедрил простой LocationStrategy, который отключает изменения панели браузера, используемые другими стратегиями запаса. Я хочу создать несколько небольших приложений, которые должны быть подключены к произвольным веб-страницам, где местоположение браузера не должно быть затронуто, хотя требуется какая-то навигация. Это хорошо работает с новой стратегией. Единственное, чего сейчас нет, это back() -функция для навигации. Очевидно, я больше не могу позвонить window.back(), но я также не нашел никакого внутреннего метода для вызова, читая угловые источники. Наверное, я мог бы напрямую позвонить LocationStrategy.back(), но затем мне все еще нужно каким-то образом сделать обновление маршрутизатора текущим. Есть ли какое-то событие, которое я мог бы запустить, или что-то еще, чтобы заархивировать обновление?

Это текущая реализация моей стратегии местоположения:

import { Injectable, Inject, Optional, platform } from 'angular2/core'; 
import { LocationStrategy, PlatformLocation, APP_BASE_HREF, } from 'angular2/router'; 
import { joinWithSlash, normalizeQueryParams } from 'angular2/src/router/location_strategy'; 
import { UrlChangeListener } from 'angular2/src/router/location/platform_location'; 
import { isPresent } from 'angular2/src/facade/lang'; 

@Injectable() 
export class HiddenLocationStrategy extends LocationStrategy { 
    private _baseHref: string = ''; 
    private pathHistory: string[] = []; 
    private poppedPathHistory: string[] = []; 
    constructor(private _platformLocation: PlatformLocation, 
     @Optional() @Inject(APP_BASE_HREF) _baseHref?: string) { 
     super(); 
     if (isPresent(_baseHref)) { 
      this._baseHref = _baseHref; 
     } 
    } 

    onPopState(fn: UrlChangeListener): void { 
    } 

    getBaseHref(): string { return this._baseHref } 

    path(): string { 
     return this.pathHistory.length > 0 ? this.pathHistory[this.pathHistory.length - 1] : ''; 
    } 

    prepareExternalUrl(internal: string): string { 
     var url = joinWithSlash(this._baseHref, internal); 
     return url; 
    } 

    pushState(state: any, title: string, path: string, queryParams: string) { 
     this.pathHistory.push(path); 
    } 

    replaceState(state: any, title: string, path: string, queryParams: string) { 
    } 

    forward(): void { this.pathHistory.push(this.poppedPathHistory.pop()); } 

    back(): void { this.poppedPathHistory.push(this.pathHistory.pop()); } 
} 

Answer 1

Я хотел бы попробовать, чтобы предоставить пользовательские PlatformLocationhttps://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser/location/platform_location.ts и вызывать его forward() и back() методы.

abstract onPopState(fn: UrlChangeListener): void; 
abstract onHashChange(fn: UrlChangeListener): void; 

кажутся события маршрутизатор при подписке.

Смотрите также https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate является

Answer 2

Решение включает в себя усиливая history.pushState API, помещая логику в методе pushState записать идентификатор Увеличения (вместе с любым другим государством, что вы хотите) и логики в методе onPopState для оценки того, вытолкнутое состояние - это обратная навигация или перемотка вперед и, наконец, обертывание нескольких методов PlatformLocation.

import { APP_BASE_HREF, LocationStrategy, PlatformLocation, Location, LocationChangeListener } from '@angular/common'; 
import { Inject, Injectable, Optional } from '@angular/core'; 
import { isPresent } from '@angular/common/src/facade/lang'; 


export interface HistoryState { 
    state: any; 
    title: string; 
    path: string; 
} 

@Injectable() 
export class HiddenLocationStrategy extends LocationStrategy { 
    private baseHref: string = ''; 
    private pathHistory: HistoryState[] = []; 
    private poppedPathHistory: HistoryState[] = []; 

    constructor(
     private platformLocation: PlatformLocation, 
     @Optional() @Inject(APP_BASE_HREF) baseHref?: string 
    ) { 
     super(); 

     if (isPresent(baseHref)) { 
      this.baseHref = baseHref; 
     } 
    } 

    onPopState(fn: LocationChangeListener): void { 
     this.platformLocation.onPopState((ev: PopStateEvent) => { 
      let backward = this.pathHistory.find((item) => item.state.uid === ev.state.uid); 
      let forward = this.poppedPathHistory.find((item) => item.state.uid === ev.state.uid); 

      if (backward) { 
       this.navigateBack(); 
      } else if (forward) { 
       this.navigateForward(); 
      } 

      fn(ev); 
     }); 
     //this.platformLocation.onHashChange(fn); 
    } 

    getBaseHref(): string { 
     return this.baseHref; 
    } 

    path(): string { 
     return this.pathHistory.length > 0 
      ? this.pathHistory[this.pathHistory.length - 1].path 
      : ''; 
    } 

    prepareExternalUrl(internal: string): string { 
     return Location.joinWithSlash(this.baseHref, internal); 
    } 

    pushState(state: any, title: string, path: string, queryParams: string) { 
     state = Object.assign({}, state, { 
      uid: (new Date()).valueOf() 
     }); 

     this.pathHistory.push({ 
      state: state, 
      title: title, 
      path: path 
     }); 

     this.platformLocation.pushState(state, title, this.prepareExternalUrl('')); 
    } 

    replaceState(state: any, title: string, path: string, queryParams: string) { 
     this.platformLocation.replaceState(state, title, path); 
    } 

    forward(): void { 
     this.platformLocation.forward(); 
    } 

    back(): void { 
     this.platformLocation.back(); 
    } 

    private navigateForward() { 
     this.pathHistory.push(this.poppedPathHistory.pop()); 
    } 

    private navigateBack() { 
     this.poppedPathHistory.push(this.pathHistory.pop()); 
    } 
}