我正在使用ASP.NET Core中的@angular处理Angular 2应用程序。我有一个位于基本URL的登录页面,它有自己的布局文件,索引页面和控制器。
我要添加的内容是我的网站/ toolkit的整个部分。为了开始它,我使用我的内部布局,索引和控制器在/ toolkit上放置了MyProfileComponent
。我还创建了一个位于/ toolkit / profile /:uniquename
问题是,当我在添加内部路由后运行应用程序时,出现错误。
/ toolkit抛出此错误
异常:调用节点模块失败并显示错误:错误:未捕获(在承诺中):错误:找不到加载'ProfileComponent'的主要插座
错误:找不到加载'ProfileComponent'
的主要插座at getOutlet(D:\ Projects .. \ node_modules \ @angular \ router \ bundles \ router.umd.js:3018:23)
和/ toolkit / profile / sdfsad会抛出此错误
异常:调用节点模块失败并显示错误:错误:未捕获(在承诺中):[object Object]
我是角度2的新手,我见过的所有内容都希望你在组件上使用现在绝对的Directives属性,但是在这个版本的角度2中已经消失了(@angular是版本2.0.0)。我可能做错了什么,但这些是件:
_InternalLayout (额外的东西被删除)
<head>
<base href="/toolkit" />
</head>
<body class="menubar-top menubar-dark theme-primary">
@RenderBody()
@RenderSection("scripts", required: false)
</body>
/Toolkit/Index.cshtml
@{
Layout = "~/Views/Shared/_InternalLayout.cshtml";
}
<app asp-prerender-module="@Url.Content("ClientApp/dist/main-server")">Loading...</app>
<script src="@Url.Content("~/dist/vendor.js")" asp-append-version="true"></script>
@section scripts {
<script src="@Url.Content("~/dist/main-client.js")" asp-append-version="true"></script>
}
app.component.html
<router-outlet></router-outlet>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: require('./app.component.html'),
})
export class AppComponent {
}
app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
import { LandingPageLayoutComponent } from './components/landing/landing-page-layout.component';
import { SignInComponent } from './components/account/sign-in.component';
import { RegisterComponent } from './components/account/register.component';
import { ProfileComponent } from './components/profile/profile.component';
import { MyProfileComponent } from './components/profile/my-profile.component';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
LandingPageLayoutComponent,
SignInComponent,
RegisterComponent,
ProfileComponent,
MyProfileComponent
],
imports: [
UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
RouterModule.forRoot([
{ path: 'signin', component: SignInComponent },
{ path: 'register', component: RegisterComponent },
{
path: 'toolkit',
component: MyProfileComponent,
children: [
{ path: '' },
{ path: 'profile/:uniquename', component: ProfileComponent },
]
},
{ path: '', component: LandingPageLayoutComponent },
{ path: '**', redirectTo: 'error' }
])
]
})
export class AppModule {
}
根页面,登录并注册所有工作,但当我尝试登录并在/ account下注册子项时,我遇到了同样的问题。我确定我在做一些愚蠢的事情,一旦我们弄明白,我会尝试用这些页面进行其他嵌套。
修改
如果重要,我正在使用this Visual Studio 2015 template。它工作正常,直到我开始尝试添加嵌套路由。
答案 0 :(得分:1)
根据您的错误以及我在app.module.ts
中的RouterModule代码中看到的内容,根据您的目标,有两种可能的解决方案。
1)如果在路线&#39; / toolkit&#39;,您想看到 MyProfileComponent 并且在路线&#39; / toolkit / profile /:uniquename&#39; (在此处显示完整路径)您希望看到 ProfileComponent 而不是 MyProfileComponent ,那么路由器的代码需要如下所示:
RouterModule.forRoot([
{ path: 'signin', component: SignInComponent },
{ path: 'register', component: RegisterComponent },
{
path: 'toolkit',
children: [ // change here
{ path: '', component: MyProfileComponent }, // both components are siblings within 'toolkit' path
{ path: 'profile/:uniquename', component: ProfileComponent }
]
},
{ path: '', component: LandingPageLayoutComponent },
{ path: '**', component: ErrorComponent } // this also needs to be changed to match a component
])
2)如果在路线&#39; toolkit / profile /:uniquename&#39;你想看到MyProfileComponent和ProfileComponent 嵌套在里面那么你的路由器代码应该是什么样的
RouterModule.forRoot([
{ path: 'signin', component: SignInComponent },
{ path: 'register', component: RegisterComponent },
{
path: 'toolkit',
component: MyProfileComponent,
children: [
// this line needs to be removed { path: '' },
{ path: 'profile/:uniquename', component: ProfileComponent }
]
},
{ path: '', component: LandingPageLayoutComponent },
{ path: '**', component: ErrorComponent } // this also needs to be changed to match a component
])
(2)续&-然后在my-profile.component.ts
内,您的template
必须有<router-outlet></router-outlet>
来处理嵌套的子路线
在这两种情况下,您的path: **'
都需要有与之关联的组件。进行重定向时,您必须包含 pathMatch 属性,例如pathMatch: 'full'