Angular2：location.go（url）を使用してURLにナビゲートできない

Question

typescript関数からlocation.goサービスを使用して特定のURLに移動しようとしています。ブラウザのURLが変更されますが、URLのコンポーネントは画面に反映されません。

constructor(location: Location, public _userdetails: userdetails){ 
    this.location = location; 
} 
login(){ 
    if (this.username && this.password){ 
     this._userdetails.username = this.username; 
     this.location.go('/home'); 
    } 
    else{ 
     console.log('Cannot be blank'); 
    } 
} 

私は行方不明ですが、ログイン方法（実際の）画面にとどまっていますか？

Answer 1

はい、あるルートから別のルートにリダイレクトする場合は、location.goを使用するべきではありません。通常、ブラウザでnormalized urlを取得していました。

Location docsは、以下に注意してください。

注：ルート変更をトリガーするには、ルーターサービスを使用することをお勧めします。 ロケーションを使用するのは、正規化されたURLと対話するか、ルーティング外にある を作成する必要がある場合のみです。

むしろあなたは[routerLink]ディレクティブを使用してhrefを作成しながら、あなたがそれを行うよう['routeName']がかかりますRouter APIのnavigateメソッドを使用する必要があります。あなただけ、あなたはさらなる研究ではrouter.navigateByUrl(url)

import { 
    ROUTER_DIRECTIVES, 
    RouteConfig, 
    ROUTER_PROVIDERS, 
    Location, //note: in newer angular2 versions Location has been moved from router to common package 
    Router 
} from 'angular2/router'; 

constructor(location: Location, 
      public _userdetails: userdetails, 
      public _router: Router){ 
    this.location = location; 
} 
login(){ 
    if (this.username && this.password){ 
     this._userdetails.username = this.username; 
     //I assumed your `/home` route name is `Home` 
     this._router.navigate(['Home']); //this will navigate to Home state. 
     //below way is to navigate by URL 
     //this.router.navigateByUrl('/home') 
    } 
    else{ 
     console.log('Cannot be blank'); 
    } 
} 

更新

のような文字列としてURLをとるnavigateByUrlを使用することができURL経由でリダイレクトしたい場合

は、私は、あなたがnavigateを呼び出すときに、ことがわかりました基本的に配列内にrouteNameを受け入れ、パラメータがある場合は、['routeName', {id: 1, name: 'Test'}]のようにそれを渡す必要があります。

以下はnavigateのAPIのRouterのAPIです。

Router.prototype.navigate = function(linkParams) { 
    var instruction = this.generate(linkParams); //get instruction by look up RouteRegistry 
    return this.navigateByInstruction(instruction, false); 
}; 

linkParamsがgenerate関数に渡されると、それは他のcompoentにナビゲートするために必要なすべてのInstruction年代を返すん。ここでInstructionはComponentInstructionを意味し、ルーティングに関するすべての情報を持っています。基本的に@RouteConfigに登録するとRouteRegistryに追加されます。 はrouter-outletに割り当てられます。

は今、検索命令のは、コンポーネントをロードすると、彼らが存在する場合、urlParams &親&子コンポーネント命令などのコンポーネントに様々なものが利用できるようになります責任があるnavigateByInstructionメソッドに渡されます。 （コンソールで）

命令

auxInstruction: Object //<- parent instructions 
child: null //<- child instructions 
component: ComponentInstruction //<-current component object 
specificity: 10000 
urlParams: Array[0] <-- parameter passed for the route 
urlPath: "about" //<-- current url path 

注：角2は、ベータ版のリリースにあったときに全体の答えは、古いルータのバージョンに基づいています。`;