将Angular路由与MVC路由连接

问题描述

在WebApi2中的新项目中，我使用Angular2框架.配置和添加angular之后，我尝试调用第一个组件.这是我的问题.如何将角度路由与webapi2连接?我在添加路由的地方添加新类:我在MVC控制器视图Index.cshtml

In my new project in WebApi2 I use Angular2 framework. After configuring and adding angular I tried to call first compnent. And there is my question. How to connect angular routing with webapi2? I add new class where I add routing:I call <home-page> in MVC controller view 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',
})

HomePage.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组件.我在哪里弄错了?

I included it to app.module.ts to imports section. When I launch application I see information from my HomePage component but when I add route path /test, it redirects me to HomePage component. Where have I made a mistake?

推荐答案

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

I resolved problem. I called <home-page> in Index.cshtml and that view was rendered from _Layout.cshtml. When I moved called component to _Layout.cshtml all things go correct. Thanks for help!

这篇关于将Angular路由与MVC路由连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！