ASP.Net Core + Angular 2 app/home 路由 [英] 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 5.0 和 Angular 2 上的 VS2017 构建一个简单的单页应用程序,该模板取自 ASP.NET Core 模板包.该应用程序应该管理联系人列表数据库.
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 主页视图的 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 页面,该页面仅显示正在加载...",而我并不真正需要(我认为).
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 中的配置方法:
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 app/home 路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!