ASP.Net Core + Angular 2应用程序/家庭路由 [英] ASP.Net Core + Angular 2 app /home routing

问题描述

我已经为此奋斗了一段时间，决定写一篇文章.

I've been fighting with this for a while now and decided to write a post.

我正在从ASP.NET Core模板包中获取的模板上，在ASP.Net Core 5.0和Angular 2上使用VS2017构建一个简单的单页应用程序.该应用程序应该可以管理联系人列表数据库.

I'm building a simple Single Page Application using VS2017 on ASP.Net Core 5.0 and Angular 2 over a template taken from ASP.NET Core Template Pack. The app is supposed to manage a contact list database.

我想到的想法是，默认的起始"/home"页面应使用HomeComponent显示联系人列表.所有路由都可以正常工作，但是当应用程序启动时或每当我尝试路由到"/home"时，它都会一直转到ASP Home视图的Index.cshtml页面，而不是使用Angular路由.

The idea I have in mind is that the default starting '/home' page should be displaying the list of contacts using HomeComponent. All routing works fine, but when app is getting started or whenever I'm trying to route to '/home', it keeps going to ASP Home view's Index.cshtml page instead of using Angular routing.

有任何想法如何使其始终通过Angular吗?我想将HomeComponent与'/home'路线对齐，但是它一直转到ASP页，该页只说'Loading ...'，而我并不需要(我认为).

Any idea how to make it go through Angular at all times? I wanted to align the HomeComponent with '/home' route but instead it keeps going to ASP page which is only there to say 'Loading...' which I don't really need (I think).

我尝试了很多不同的解决方案，但是我什么都无法工作.我在这里可能会遗漏一些明显的东西，因为我在这些方面不太先进，因此，如果您可以将其保留为基本内容，请执行;-)

I've tried a lots of different solution but I wasn't able to get anything to work. I might be missing something obvious here as I'm not too advanced on these grounds, so if you can keep it basic, please do ;-)

这是我来自Startup.cs的Configure方法:

Here's my Configure method from Startup.cs:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index" });

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index",});
        });
    }

app.module.shared.ts:

app.module.shared.ts:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { DetailsComponent } from './components/details/details.component';
import { EditComponent } from './components/editContact/editContact.component';
import { NewContactComponent } from './components/newContact/newContact.component';
import { HomeComponent } from './components/home/home.component';
import { ContactServices } from './services/services';

export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
    AppComponent,
    NavMenuComponent,
    DetailsComponent,
    EditComponent,
    NewContactComponent,
    HomeComponent
],
providers: [ContactServices],
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'details', component: DetailsComponent },
        { path: 'new', component: NewContactComponent },
        { path: '**', redirectTo: 'home' }
    ])
]};

ASP的主页Index.cshtml:

ASP's Home Index.cshtml:

@{
ViewData["Title"] = "Home Page";
}
<app>Loading...</app>

<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
} 

Aaa和home.component.ts:

Aaaand home.component.ts:

import { Component } from '@angular/core';
import { ContactServices } from '../../services/services';
import { Response } from '@angular/http';

@Component({
selector: 'home',
templateUrl: './home.component.html'
})
export class HomeComponent {
public ContactList = [];
public constructor(private conService: ContactServices) {
    this.conService.getContactList()
        .subscribe(
        (data: Response) => (this.ContactList = data.json())
        );
    }
}

在此先感谢大家！任何建议将不胜感激.

Thanks in advance guys! Any advice will be appreciated.

推荐答案

我采用了不同的方法，并使用了

I took different approach and rebuilt my application using the tutorial found under this link.

这是一个解决方案，您首先创建ASP.NET CORE Web App API接口并在其上安装Angular.一点点的工程"就可以直接在Visual Studio上运行，并且花费很少的时间进行设置.

It is a solution where you first create ASP.NET CORE Web App API interface and install Angular over it. A little bit of 'engineering', works directly off Visual Studio and takes little time to set up.

这篇关于ASP.Net Core + Angular 2应用程序/家庭路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！