Angular 2 - 在 Asp.Net mvc 4x 中使用 cshtml 而不是 html
ToT*_*oTa 5 web-config razor asp.net-mvc-4 angular2-routing angular
我已经按照此模板使用 angular 2 创建了 asp.net mvc 应用程序
我的应用程序：
索引.cshtml
@{
Layout = null;
ViewBag.Title = "Home Page";
}
<!DOCTYPE html>
<html>
<head>
<base href="@Url.Content("~/")">
<title>MVC 4 Angular 4</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="dist/scripts/packages/core-js/client/shim.min.js"></script>
<script src="dist/scripts/packages/zone.js/dist/zone.js"></script>
<script src="dist/scripts/packages/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('dist/scripts/main.js').catch(function (err) {
console.error(err);
});
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
主文件
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AppComponent } from "./Components/app";
import { Page1 } from "./Components/page1";
import { Page2 } from "./Components/page2";
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
path: 'page1',
component: Page1
},
{
path: 'page2',
component: Page2
},
{
path: '',
redirectTo: '/page1',
pathMatch: 'full'
}
])
// other imports here
],
exports: [RouterModule],
declarations: [
AppComponent,
Page1,
Page2
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
应用程序
import { Component } from "@angular/core";
@Component({
selector: "my-app",
template: `
<h1>{{app}}</h1>
<nav id="main-menu">
<a class="menu-item" routerLink="/page1" routerLinkActive="active">Page1</a>
<a class="menu-item" routerLink="/page2" routerLinkActive="active">Page2</a>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent {
app= "App"
}
page1.ts
import { Component } from '@angular/core';
@Component({
selector: 'page1',
template: "<div>page1</div>",
styleUrls: []
})
export class Page1 { }
因此，为了使 angular 2 在 asp.net mvc 项目上工作，根据文档，web.config应该包含以下代码：
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/src/" />
</rule>
</rules>
</rewrite>
</system.webServer>
因此，在此之后，当我使用静态 html 或将 html 内联到组件中时，它工作得很好。
我想要的是使用 cshtml 而不是 html，所以我的组件看起来像这样：
import { Component } from '@angular/core';
@Component({
selector: 'page1',
templateUrl: "home/about",
styleUrls: []
})
export class Page1 { }
home/about在我的家庭控制器中：
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
但后来，我明白了：
如果我<system.webServer>从中删除web.config 它，它工作得很好，除非我刷新页面（按 f5），然后我得到这个：
在文档的最后，您可以看到这一段：
匹配 url 将重写每个请求。如果您希望某些请求（例如 Web API 请求）通过，则必须对此进行调整。
所以我的问题是如何配置web.config或其他方式来避免这个问题？