【发布时间】：2017-08-22 19:36:49
【问题描述】：
我正在尝试在 Visual Studio Asp.Net Core MVC 项目 (c#) 上使用 angular 2。
我已经将 Angular 2 和 Typecript 嵌入到项目中，并且我已经配置了所有内容以显示内容（带有设计材料）。
我想使用带有控制器和视图的经典 MVC 结构，我想将结构的视图用作 Angular 组件 templateUrl 的页面。
我在这些领域工作，但我认为这不会影响答案。 现在我已经设法使用 Angular 路由来完成所有这些工作，但是我遇到了一些问题，因为打开的第一个屏幕的内容被渲染了两次（从控制器渲染的第一个视图，因为 RenderBody 渲染了页面并且在使用了角度路由之后） .
这是路由（Angular）：
...
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: '/' }
]
})
这是区域结构：
这是布局 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>
...
angular-app-component 是一个 Angular 组件；这是代码：
...
@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 {
}
那么有没有办法将 MVC 结构与 cshtml 中的视图一起使用（因为它们当前使用 @RenderBody 正确呈现），但使用 Angular 2 路由（也因为刷新不适用于此配置）？ 我想避免在 wwwroot 中插入 html 页面和 Angular 组件（目前在 wwwroot 中插入了使用 SystemJS 生成的 Angular 脚本）。
谢谢。
【问题讨论】：
-
我想你要找的是Angular Universal
标签： c# angular model-view-controller asp.net-core angular-routing