Question

我在使用.NET MVC 5.0设置Angular项目时遇到问题。我不确定以下代码有什么问题。当我意外地运行应用程序时，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路由来路由我的视图，并使用调用控制器呈现的视图。

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上看了你的代码。引导程序模块正在尝试引导appcomponent并且appcomponent没有router-outlet标记。编辑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'; }

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

1 个答案: