将 Angular 路由与 MVC 路由连接起来答案

【问题标题】：Connect Angular routing with MVC routing将 Angular 路由与 MVC 路由连接起来
【发布时间】：2019-01-09 06:28:21
【问题描述】：

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

【问题讨论】：

可以添加'HomePage'和'AppComponent'的html文件吗？
AppComponent：<section class=""> <section> <h2>Test</h2> </section> </section> HomeComponent：<section><h1>Home</h1></section>
1.控制台有错误吗？ 2. 可以添加你的模块代码吗？
不，我没有。 @NgModule({ imports: [BrowserModule, HttpModule, routing], declarations: [HomePage, AppComponent], bootstrap: [ HomePage ] }) export class AppModule { } 我在 Index.cshtml 中调用 <home-page></home-page>
你的路由模块的代码是什么？你出口吗？

标签： asp.net-mvc angular asp.net-web-api2 angular2-routing

【解决方案1】：

您可以尝试将您的 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 { }

【讨论】：

控制台错误：Unhandled Promise rejection: StaticInjectorError[ApplicationRef]: StaticInjectorError[ApplicationRef]: NullInjectorError: No provider for ApplicationRef! ; Zone: <root> ; Task: Promise.then ; Value: Error: StaticInjectorError[ApplicationRef]: StaticInjectorError[ApplicationRef]:
已编辑 - 再试一次？
还是一样。如果我导航到 /test 我会重定向到家。我可能有配置错误吗？还是不可能？
我上面写的路由配置应该可以了。我认为问题出在另一个地方-您可以将所有项目文件添加为 sn-p 吗？
我会这样做，但要过一段时间。现在，我无法访问我的计算机

【解决方案2】：

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

【讨论】：