角度路由始终重定向到同一页面

Question

我的应用程序中的路由有问题。我使用 Angular2+ 和 WebApi2。我从快速入门项目创建了 Angular，并将其添加到我的 WebApi 解决方案中。配置后，我第一次启动应用程序一切正常。添加路由后出现问题。当我尝试导航到路由表中包含的链接时，浏览器一直将我重定向到一个组件。我搜索了如何处理它，但我没有找到任何东西。下面我给出代码和文件名：

RouteConfig.cs

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
     routes.MapRoute(
        name: "Default",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

分享_Layout.cshtml

<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="~/src/systemjs.config.js"></script>
<script>
    System.import('./src/main.js').catch(function (err) { console.error(err); });
</script>

system.config.js

packages: {
  app: {
    defaultExtension: 'js',
    meta: {
      './*.js': {
        loader: '/src/systemjs-angular-loader.js'
      }
    }
  },
  rxjs: {
    defaultExtension: 'js'
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomePage } from './HomePage.component';
import { Test } from './Test.component';
import { HttpModule } from '@angular/http';

const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomePage },
    { path: 'test', component: Test },
    { path: '**', component: HomePage }
];

@NgModule({
    declarations: [
        AppComponent, HomePage, Test
    ],
    imports: [
        BrowserModule,
        HttpModule,
        RouterModule.forRoot(appRoutes)
    ],
    providers: [],
    bootstrap: [HomePage]
})
export class AppModule { }

Index.cshtml <home-page></home-page>

Answer 1

回答：所有问题都是由@RenderBody()引起的。当我将<home-page></home-page> 移动到@RenderBody() 下时，一切正常。