角4：router.navigate（）はコードの実行残りを確実に停止しません

Question

私はrouter.navigate（['/ some-route']）を処理するより良い方法を探しています。

私のコードは、両方のにconsole.logは、ナビゲーションが呼び出されても記録されます、上記のコードで

以下

class SomeComponent implements OnInit, AfterViewInit { 
    ngOnInit() { 
    ... 
    router.navigate(['/some-route']); 
    ... 
    console.log('This line will be logged.'); 
    } 

    ngAfterViewInit() { 
    ... 
    console.log('This line will also be logged.'); 
    ... 
    } 
} 

ようなものです。

私は（それがrouter.navigateとして起こることを知っている）は、JavaScriptの動作に応じただけで機能していない終了文ですと動作します。

例外として、ブラウザコンソールにはログはありません。

---

上記のシナリオを処理するためのより良い解決方法をお手伝いして、残りのコードがナビゲーション後に実行されないようにすることはできますか？

Answer 1

ngAfterViewInitは常に、あなたがCanActivateガードを使用するので、このような気にいらを試してみたいことがありますが実行されます。

import { Injectable } from '@angular/core'; 
import { CanActivate, Router } from '@angular/router'; 
import { AuthService } from './auth.service'; 

@Injectable() 
export class SomeComponentGaurd implements CanActivate { 

    constructor(private router :Router) {} 

    canActivate() { 
    if(/** some condition*/){ 
      this.router.navigate(['/some-route']); 
     // will access to the component 
     return false; 
    }else{ 
     // won't access to the component 
     return true; 
    } 
    } 
} 

ルーティングの設定：

export const AppRoutes:RouterConfig = [ 
    { 
    path: 'some-cmp', 
    component: SomeComponent, 
    canActivate: [SomeComponentGaurd] 
    } 
]; 

これが実行されてからngOnInitを防ぐことができます。 AuthGuardを使用せずに周り

簡単な作業：

class SomeComponent implements OnInit, AfterViewInit { 
    private getOut : boolean = false; 
    ngOnInit() { 
    ... 
    if(/** some condition*/){ 
     this.getOut = true; 
     return router.navigate(['/some-route']); // don't forget to return 
    } 

    ... 
    console.log('This line will be logged.'); 
    } 

    ngAfterViewInit() { 
    ... 
    if(this.getOut){ 
     return; 
    } 
    console.log('This line will also be logged.'); 
    ... 
    } 
} 

これはあまりにも動作しますが、良い習慣ではないはずです。