0

Visual Studio Asp.Net Core MVCプロジェクト(C#)で角度2を使用しようとしています。Asp.Net Core MvcとAngular 4(2)ルーティング

私は既にAngular 2とTypecriptをプロジェクトに埋め込んでおり、コンテンツを表示するためにデザイン素材を使ってすべてを設定しました。

コントローラとビューで従来のMVC構造を使用したいと思います。構造のビューをAngularコンポーネントのtemplateUrlのページとして使用したいと思います。

私はその分野で働いていますが、私はこれが答えに影響するとは思わないのです。 今のところAngularルーティングですべてをやっていますが、コンテンツが最初の画面(レンダーボディがページをレンダリングし、角度ルートを使用したためにコントローラからレンダリングされた最初のビュー)に対して2回レンダリングされるため、開かれた。

これはルーティング(角)である。

... 
const appRoutes: Routes = [ 
     { 
      path: 'Authentication/Auth/Login', 
      component: LoginComponent 
     }, 
     { 
      path: 'Admin/Home/Dashboard', 
      component: DashboardComponent 
     }, 
     { 
      path: 'Admin/Home/Contact', 
      component: ContactComponent 
     } 
    ]; 

これはアプリケーションモジュールである。

 ... 
@NgModule({ 
     imports: [ 
      BrowserModule, 
      HttpClientModule, 
      ... 
      AppRouting, 
      BrowserAnimationsModule 
     ], 
     declarations: [ 
      AppComponent, 
      DashboardComponent, 
      ContactComponent, 
      LoginComponent 
     ], 
     bootstrap: [ 
      AppComponent 
     ], 
     providers: [ 
      { provide: APP_BASE_HREF, useValue: '/' } 
     ] 
    }) 

これは領域構造である:

Areas structure

これはレイアウトでありますhtmlページ(共有、LayoutAngular.cshtml):

... 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Title</title> 

    <!-- Material --> 
    <link rel="stylesheet" href="~/css/indigo-pink.css" /> 

    @Html.Raw(JavaScriptSnippet.FullScript) 
</head> 
<body> 
    <!-- Root angular --> 
    <angular-app-component></angular-app-component> 

    @RenderBody() 

    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="~/lib/core-js/client/shim.min.js"></script> 
    <script src="~/lib/zone.js/dist/zone.js"></script> 
    <script src="~/lib/systemjs/dist/system.src.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script src="~/js/systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function (err) 
     { 
      console.error(err); 
     }); 
    </script> 
    ... 

角度アプリコンポーネントは角度成分です。これはコードです:

... 
@Component({ 
    selector: 'angular-app-component', 
    template: `<router-outlet></router-outlet>` 
}) 
export class AppComponent implements OnInit { 
} 

これは、ダッシュボード・コンポーネント(dashboard.component.ts)です:

... 
@Component({ 
    selector: 'dashboard-component', 
    templateUrl: "/Admin/Home/Dashboard" // This is load template from controller View (Areas/Admin/Controllers/Home/Dashboard, this is a simple return View) to Mvc View in (Areas/Admin/Views/Home/Dashboard.cshtml) 
}) 
export class DashboardComponent { 
} 

のでCSHTMLで景色を眺めながらMVC構造を使用するための方法は、彼らがいるので(あり現在、@ RenderBodyで正しくレンダリングされていますが、角度2ルーティングを使用しています(リフレッシュはこの設定では機能しないため)。wwwrootのhtmlページとAngularコンポーネントを挿入しないようにしたいと考えています(現在wwwrootには、SystemJSで生成された角度スクリプトが挿入されています)。

ありがとうございました。

+0

あなたが探しているものは、[Angular Universal](https://github.com/angular/universal#introduction) – wodzu

答えて

0

_Layout.cshtmlから<angular-app-component></angular-app-component>を削除して、Index.cshtmlファイル内に置きます。これにより、と呼ばれる<angular-app-component></angular-app-component>がレンダリングされます。

次に、残りのビュー、つまりAuthentication/Auth/Loginへの呼び出しからレンダリングされるものは、Layout = nullがテンプレート内に設定されているため、レイアウトが再度レンダリングされないようにしてください。

+0

です。これを行うと、ロードされる最初のページ(デバッグ開始後の最初のURL)最初のレンダリングはLayout @ RenderBodyによって実行され、2番目のレンダリングは、TemplateUrlをレンダリングするAngularによって2回レンダリングされます。 コンテンツが2回表示されます。 [レンダリング後のページのスクリーンショット](http://imgur.com/a/5ObLT) – WazeRoot

関連する問題