角度アプリ（モバイル）の後方ナビゲーションを防止する

Question

私が構築しているアプリの一部で、ユーザーが後方にナビゲートしないようにする必要があります。これまでは、この方法を使用しています：

ngOnInit() { 

history.pushState(null, null, location.href); 
window.onpopstate = function(event) { 
    history.go(1); 
}; 
} 

ngOnDestroy() { 
window.onpopstate = function(event) { 
    history.go(); 
}; 
} 

これは、iOS ChromeとSafariを除いて素晴らしい機能です。私も試しました：

history.replaceState(null, document.title, location.pathname); 

ngOnInitで運がありません。誰かが、これらのモバイルデバイス上のブラウザがWindows/macOSバージョンのブラウザとは異なる履歴やポップステートをどのように使用しているかについて教えてもらえますか？

Answer 1

さまざまなブラウザ固有のソリューションを実装するのではなく、AngularのCanDeactivate guardについて考えてみましょう。

@Injectable() 
export class NavigatorService{ 
    private previousRoute:string = null; 
    private currentRoute:string = null; 
    /** Listen to and log new route paths */ 
    constructor(private router:Router){ 
    router.events.filter(e => e instanceof NavigationEnd).subscribe(
     e => { 
     this.previousRoute = this.currentRoute; 
     this.currentRoute = e['url']; 
     } 
    ) 
    } 
    /** Checks whether the next route corresponds to the previous route */ 
    isGoingBack(nextState:RouterStateSnapshot){     
     return nextState.url === this.previousRoute; 
    } 
} 

次は、ユーザーが離れてから移動を許可するかどうかを判断するために、このサービスに依存しますCanDeactivateGuardを作成します。

は、あなたが常に前のルートを保存するサービスを（のはNavigatorServiceそれを呼びましょう）があるとし現在のビュー：最後に

@Injectable() 
export class BackwardGuard implements CanDeactivate<any> { 
    // Inject the service needed 
    constructor(navigatorService:NavigatorService){} 

    // Angular 4 provides these arguments to any CanDeactivate guard 
    // see https://angular.io/api/router/CanDeactivate#interface-overview 
    canDeactivate(component:any, currentRoute:ActivatedRouteSnapshot, 
      currentState:RouterStateSnapshot, nextState:RouterStateSnapshot){     
     // Allow navigation only if the user is not going back 
     return !this.navigatorService.isGoingBack(nextState); 
    } 
} 

は、その成分あなたが後方ナビゲーションから保護するルートで、このガードを登録します。

appRoutes:Routes = [ 
    { 
    path: 'some-path', 
    component: ProtectedComponent, 
    canDeactivate: [BackwardGuard] 
    } 
]; 

このテストされていないコードにはバグがあるかもしれませんが、一度解凍すると動作するはずです。あなたのコンポーネントのモジュール（例：AppModule）へNavigatorServiceを提供することを忘れないでくださいとのマッチングルーティングモジュール（例：AppRoutingModule）へBackwardGuardを提供するために、