角2ルーティングの問題、空白ページへの経路

Question

新しいAngular 2ルータに問題があります。私は、ログインコンポーネントからダッシュボードページにルーティングする関数を呼び出すボタンのクリックイベントを持っています。どちらもメインのアプリコンポーネントの子コンポーネントです。ボタンをクリックして関数が起動すると、navigateByUrl（）関数を使用してログインからダッシュボードページに移動します。その関数が呼び出されると、ブラウザのURLにlocalhost：52370/dashboardが表示されますか？ブラウザに黒いページが表示されます。この問題がどこから発生したのかわからないここで）（私のapp.routes.tsが

const appRoutes: Routes = [ 
{ path: "", component: HomeComponent }, 
{ path: "home", redirectTo: "" }, 
{ path: "login", component: LoginComponent }, 
{ path: "dashboard", component: DashboardComponent }, 
]; 

export const AppRoutingProviders: any[] = []; 
export const AppRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

login.component.tsがnavigateByUrl上の空白のページを取得

constructor(private router: Router, private route: ActivatedRoute) { } 

public login() { 
    this.loginStatus = true; 
    this.onLogin.emit(this.loginStatus); 
    this.router.navigateByUrl("dashboard") 
     .then(function() { 
      console.log("success"); 
     }).catch(function (err) { 
      console.log(err); 
     }); 
} 

Answer 1

だから私は持っていた同様の問題をファイルファイルで呼び出します。私が発見したことの1つは、リダイレクトの間に跳ね返っているので、タイミング関連の問題のようです。私の現在の設定は、以下のルートで構成されています

• /- RedirectComponent
/ダッシュボード
• - 非管理者
• /ログインのためにロードされた - - 管理者
• /プロジェクトのためにロードされたログインページは、/にリダイレクト

RedirectComponentは、ログインしてから/を直接クリックすると、認証済みのステータスを確認し、そのユーザーが管理者であるかどうかを判断します。次にnavigateByUrl（）が呼び出され、ユーザーが正しいルートに送信されます。 navigateByUrlを（「/」）を実行すると

_router.events.subscribe((event:Event) => { 
    if (event instanceof NavigationEnd) { 
    // When the route is '/', location.path actually returns ''. 
    let newRoute = this._location.path() || '/'; 
    // If the route has changed 
    if (this.currentRoute !== newRoute) { 
     console.log('App(): new route', this.currentRoute, newRoute); 
     this.currentRoute = newRoute; 
    } 
    } 
}); 

、これは私をアップロード：最初のナビゲートは/完全に私は有線しているグローバルルータイベントリスナーから見ることができる、しかしまだ完了していないしていることに注意してくださいRedirectComponentは期待どおりにナビゲートし、navigateByUrl（ '/ dashboard'）を呼び出します。この結果、ページのロードは完全に空になり、/ダッシュボードのナビゲート・ルート・イベントは決して起動しません。以前のナビゲーションが完了するまでナビゲートできないようなロジックがあると思いますか？私のルータのイベントリスナーは、次の印刷し、物事は、ルーティングを停止し、空白の画面が表示され、右の前に：あなたはで見ることができるように

App(): new route "/login" "/" (2) 

（2）、Safariで、すべてのルーティングはChromeでのに対し、二回何とか起こることが表示されます一度しか起こらない。また、イベント/コンポーネントが2回発射されているSafariのようなブラウザーでいくつかの根本的な問題を処理するために、/ダッシュボードの発射を妨げるロジックの一部が「修正」されていて、複数のナビゲーションが実際には必要ない場合もあります。 ？しかし、純粋な投機。

根本的な問題に対処するにはより良い方法があるかもしれませんが、タイミングの問題が発生した場合に私たちのツールチェスト内にいる私たちのすべての角度ベテランが持っているシンプルな、私たちの古き良きフレネミーのsetTimeout（...、0）：

 setTimeout(() => { 
     this.router.navigateByUrl('/dashboard'); 
     }, 0); 

/ダッシュボードのルートはその後、適切に作動させ、期待通りに/ナビゲーションが完了した後、ナビゲーションは、発生します。 ChangeDetectorRefなどを使用して、より良い仕組みや代替サルパッチがあるかもしれませんが、これで今のところ私の仕事は十分にうまくいきます。それを出荷。

物事を支配するだけの価値があるかもしれません。お役に立てれば。別の解決策が見つかった場合は、同様の問題を抱えている他の人に役立つフォローアップとなります。