Question

我使用Angular 2和VS 2015作为IDE在ASP.NET核心Web应用程序中工作。这对我来说是全新的，所以我一直在关注每个教程以使这个页面工作。当我最终将所有内容放在一起时，我面临路由问题：页面停留在loading ...标记中，并且从不在ModuleViewComponent中显示内容。阅读了很多stackoverflow问题，但我无法修复它。

我的 main.ts 文件如下所示：

// main entry point
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 { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { NgForm } from '@angular/forms';
import { AppComponent } from './app.component';

import { ModuleViewComponent } from './components/CommonComponents/moduleView.component/moduleView.component';

const myRoutes: Routes = [
{
    path: 'home',
    component: ModuleViewComponent
},
{
    path: '/',
    redirectTo: 'home',
    pathMatch: 'full'
}
];

@NgModule({
imports: [
    RouterModule.forRoot(myRoutes),
    BrowserModule,
    FormsModule,
    HttpModule
],
declarations: [
    AppComponent,
    NavbarComponent,
    ModuleViewComponent
],
bootstrap: [AppComponent]
})

export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template:'<router-outlet></router-outlet>'
})
export class AppComponent {
}

index.cshtml

@{
ViewData["Title"] = "Home Page";
}

<my-app>loading...</my-app>

如何让它工作并显示组件内容？任何帮助都非常受欢迎，提前谢谢。

Answer 1

我创建了一个示例应用程序，它解释了使用Asp.net MVC框架创建角度（Angular v4）应用程序的一步一步细节。以下是链接。希望这对你有所帮助。您必须更新项目中的路径配置文件，以便angular可以接收请求。

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

http://hive.rinoy.in/routing-in-angular-asp-net-mvc-application/

Angular 2路由不能与ASP.net核心MVC一起使用

1 个答案: