0

在我的新项目中，WebApi2我使用 Angular2 框架。配置和添加角度后，我尝试调用第一个组件。还有我的问题。如何将角度路由与 webapi2 连接？我在添加路由的地方添加了新类：我<home-page>在 MVC 控制器视图中调用Index.cshtml

app.routing.ts

const appRoutes: Routes = [
    { path: 'home', component: HomePage },
    { path: 'test', component: AppComponent}
];

app.component.ts

@Component({
    selector: 'my-app',
    templateUrl: './app.template.html',
})

主页.component.ts

@Component({
   selector: 'home-page',
   templateUrl: './HomePage.template.html',
   providers: [GetContent]
})

system.config.js

paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the Angular folder
  'app': 'Angular',
  // angular bundles ...
}

meta: {
      './*.js': {
        loader: '/systemjs-angular-loader.js'
      }
}

共享 _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="/systemjs.config.js"></script>
<script>
    System.import('Angular/main.js').catch(function (err) { console.error(err); });
</script>

我将它包含app.module.ts在导入部分。当我启动应用程序时，我会看到来自HomePage组件的信息，但是当我添加路由路径时/test，它会将我重定向到HomePage组件。我在哪里犯了错误？

4

2 回答 2

0

我解决了问题。我调用<home-page>了 Index.cshtml，该视图是从 _Layout.cshtml 呈现的。当我将被调用的组件移至 _Layout.cshtml 时，一切正常。感谢帮助！

于 2018-08-04T07:41:27.607 回答
0

您可以尝试将您的 app.module 编辑为：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomePageComponent } from './home-page.component';


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

@NgModule({
  declarations: [
    AppComponent,HomePageComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers : [],
  bootstrap: [AppComponent]
})
export class AppModule { }
于 2018-08-01T16:21:32.780 回答