2016-04-18 14 views
4

従来のMVC WebサイトからAngular 2 SPAにページ単位で何とかルーティングしていますが、バットの直ぐ上の角度2のルーティング、つまり、有効なAngular 2ルートへのクエリパラメータの変換は、それが完全な悪夢であることが判明しているためです。MVCサイトからAngular 2アプリへのルーティング

従来のウェブアプリでは、コントローラーのアクションコードをAppControllerの対応するアクションにリダイレクトすることによって、計画を置き換える予定です。

public ActionResult Action1(int param1, int param2) 
{ 
    return RedirectTo("Action1", "App", new { param1, param2 }); 
} 

AppControllerだから私は

<base href="/Areas/Web/"> 

base hrefを設定するもindex.htmlの角2アプリ

public class AppController : Controller 
{ 
    public ActionResult Index() 
    { 
     return new FilePathResult("~/Areas/Web/index.html", "text/html"); 
    } 

    public ActionResult Action1(int param1, int param2) 
    { 
     return Redirect($"/Areas/Web#/{param1}/{param2}/action1"); 
    } 
} 

を収容する(Areas.Web)、独自のエリアにアイデアですASP.NET MVCを取得してindex.htmlとし、ブラウザに送信します。ハッシュロケーションは、shoul d評価するには

角の側では、右ですか?次のようにapp.component.tsため

私は HashLocationStrategyが使用されていることを確認してください私のブートストラップコードで

bootstrap(AppComponent, [provide(LocationStrategy, { useClass: HashLocationStrategy })]) 
    .then(success => console.log('Bootstrap success')) 
    .catch(error => console.log(error)); 

ルーティングは、次のとおりです。

@RouteConfig([ 
    { path: '/:param1/:param2/action1, name: 'Action1', component: Action1Component} 
]) 

私はこのセットアップは右Action1Componentに適切にルーティングする必要があることを前提となりしかし、それはしません。経路の設定は完全に無視され、Action1のコンストラクタは呼び出されません。

どこが間違っていますか?

EDITは:角度アプリの実行後、実際にどのような作品#なし

http://legacy.com/Areas/Web/<param1>/<param2>/action1 

である - しかし、F5キーを押すと、明らかにこの戦略を中断します。したがって、ハッシュ記号を含むURLは無効なルートですが、ハッシュタグのないURLは完全に有効です。私は混乱しています....

答えて

3

[OK]を、this answerのおかげで、トリックは、アプリケーションをブートストラップ以外ROUTER_PROVIDERSを提供決して、次のとおりです。

import { bootstrap } from 'angular2/platform/browser'; 
import { provide } from 'angular2/core'; 
import { HTTP_PROVIDERS } from 'angular2/http'; 
import { 
    ROUTER_PROVIDERS, 
    LocationStrategy, 
    HashLocationStrategy 
} from 'angular2/router'; 
import { AppComponent } from './app.component'; 

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
    provide(LocationStrategy, { useClass: HashLocationStrategy } 
)]) 
.then(success => console.log('Bootstrap success')) 
.catch(error => console.log(error)); 

私の推測では、あなたがROUTER_PROVIDERSを宣言した場合のコンポーネントの中に注入された他のサービスと同じように、あなたがRouterの新鮮なインスタンスを取得する、ということですコンポーネントデコレータのprovidersセクションに設定して、HashLocationStrategyをコンフィグレーションしたインスタンスをオーバーライドし、PathLocationStrategyという名前を指定すると、それが正しく取得されます。

関連する問題