Angular 2コンポーネントの初期化を停止し、デフォルトの（安全な）ルートにナビゲートする方法

Question

Componentが初期化中であるため、コンポーネントが正常にロード/ 。コンポーネントのngOnInitメソッドは、undefinedオブジェクトのメンバがテンプレート内でアクセスされているため、完全なエラーを防ぐために安全なページにnavigate()を試行します。

ngOnInit() { 
    // when no scenario has been passed to the component: 
    // try to get the active one from the application context via the scenario service 

    if (null == this.scenario) { 

    this.scenario = this.scenarioService.activeScenario; 

    // when there's no current scenario set in the application context: 
    // try to get one from the scenario service in the active period 

    if (null == this.scenario) { 

     this.scenario = this.scenarioService.getScenariosByYear(this.settingsService.activePeriod)[0]; 

     // when there's no scenarios defined in the active period: 
     // navigate to the the scenario manager component so the user can create one 

     if (null == this.scenario) { 

     this.router.navigate(['/scenario']); // <==== this doesn't seem to fire 

     } 
    } 
    } 
} 

質問1：なぜthis.router.navigate(['/scenario']);コール作業が（コンポーネントのライフサイクルを中断）しないのですか？

質問2：一般的に、初期化中にコンポーネントのライフサイクルを停止して、安全な場所への先取りナビゲーションを可能にする方法はありますか？

Answer 1

現在のところ、Angular 2では、アプリケーションがコンポーネントライフサイクルとコンポーネントテンプレート（および子コンポーネント/テンプレート）の描画を中断（停止）する仕組みを提供していないようです。

親コンポーネント内のすべてのプロパティとすべての関連する子コンポーネントプロパティに条件付き処理/レンダリングロジックを配置して、コンポーネント内のundefinedオブジェクトへの誤ったアクセスを防止することをお勧めしました。このアプローチは確かにうまくいくが、設定するのは面倒だと思うが、維持するのはもっと面倒だと思ったので、少し上のレベルで問題に取り組むことにした。...

最終的には、私のアプローチはラップを使用することだった<div *ngIf="valid"></div>親コンポーネントのテンプレートの周りに配置し、それぞれの従属子コンポーネントテンプレートを独自のラップ内に配置します。<div *ngIf="valid"></div>要素。これにより、undefinedオブジェクトの場合、テンプレートのレンダリングを停止することができました。私はその後、親コンポーネントの有効なインスタンス化が発生したとき（たとえば、undefinedオブジェクトが存在しない）、子コンポーネントがリッスンするサービスを作成し、親コンポーネントが通知するようにしました。

このような状況に対処する方法について、より良い提案がある場合は、教えてください。

Answer 2

あなたが望むのはガードです。ガードは、ルートへのナビゲーションを防止するために使用することができます。または、この場合、傍受やリダイレクトに使用できます。 https://angular.io/guide/router#milestone-5-route-guards