Angular-来自.NET MVC 5.0的路由视图的问题

Question

我正在使用.NET MVC 5.0设置Angular Project的问题。我不确定以下代码有什么问题。当我运行该应用程序时，对我来说，App在App-component.ts中显示模板设置，而不是登录

const appRoutes: Routes = [
    { path: '', redirectTo: 'login', pathMatch:'full' },
    { path: 'login', component: LoginComponent },

    // otherwise redirect to home
    { path: '**', redirectTo: 'login' }
];

要测试事物，而忽略MVC控制器/视图路由一秒钟，我还尝试在我的登录文件夹中创建HTML文件，

 @Component({
    moduleId: module.id,
    templateUrl: 'login-component.html' -- This was initially /Public/Login -Path to the MVC controller
})

项目在此处的github项目上共享

https://github.com/gak-mpro/angularmvcstarter/tree/master/a2rnd

我的问题是..使用MVC路由与通过调用控制器呈现的视图呈现的MVC路由我需要做什么。

Answer 1

更改定义路由的顺序。默认路线应始终在路由列表的末端：

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: 'login', pathMatch:'full' },

    // otherwise redirect to home
    { path: '**', redirectTo: 'login', pathMatch:'full' }
];

我只是在Git Hub上查看了您的代码。Bootstrap模块正在尝试引导AppComponent，并且AppComponent没有路由器输出标签。在app.component.ts文件中编辑模板以包含

<router-outlet></router-outlet>

，它应该向您显示应用程序组件和登录组件HTML内容。

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>Hello {{name}}</h1><br/><router-outlet></router-outlet>',
})
export class AppComponent  { name = 'Angular'; }