报头消失在角7路由器上。
最近，我从第5角升级到了7。在观看了最近的ng-conf的这演示之后，我决定更新我的非常糟糕的路由代码。
我决定在应用程序组件之上实现一个shell组件来处理路由问题，然后在需要时延迟加载每个功能模块。到目前为止，我的情况如下：
app.component.html
<router-outlet></router-outlet>app-routing.module.ts
import { Injectable, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AccessGuard } from './shared/guards/access.guard';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
export const appRoutes: Routes = [
{
path: 'login',
component: LoginComponent,
data: { requiresLogin: false },
canActivate: [ AccessGuard ]
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(appRoutes) ],
exports: [ RouterModule ],
providers: [ AccessGuard ]
})
export class AppRoutingModule {}所以在这里，你可以看到，我只关心登录和页面找不到的意见，在应用程序根目录。下面是应该成为其他一切的主要路由器的shell.module：
shell.component.html
<app-header></app-header>
<router-outlet name="primary"></router-outlet>shell-routing.module.ts
import { Injectable, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Observable } from 'rxjs';
import { AccessGuard } from '../shared/guards/access.guard';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { ShellComponent } from './shell.component';
export const shellRoutes: Routes = [
{
path: '',
component: ShellComponent,
data: { requiresLogin: true },
canActivate: [ AccessGuard ],
children: [
{
path: 'dashboard',
component: DashboardComponent,
data: { requiresLogin: true },
canActivate: [ AccessGuard ]
},
{
path: 'posts',
loadChildren: 'app/posts/posts.module#PostsModule'
},
{
path: 'user-profile',
loadChildren: 'app/user-profile/user-profile.module#UserProfileModule'
}
]
},
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
}
];
@NgModule({
imports: [ RouterModule.forChild(shellRoutes) ],
exports: [ RouterModule ],
providers: [ AccessGuard ]
})
export class ShellRoutingModule {}同样，正如您所看到的，我正在延迟加载Posts和UserProfile模块。最后，上述模块路线：
posts-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AccessGuard } from '../shared/guards/access.guard';
import { PostsComponent } from './posts.component';
import { PostComponent } from './post/post.component';
const postsRoutes: Routes = [
{
path: '',
redirectTo: 'add',
pathMatch: 'full'
},
{
path: 'add',
component: PostComponent,
data: { requiresLogin: true },
canActivate: [ AccessGuard ],
},
{
path: 'comment/:id',
component: PostComponent,
data: { requiresLogin: true },
canActivate: [ AccessGuard ],
},
{
path: 'edit/:id',
component: PostComponent,
data: { requiresLogin: true },
canActivate: [ AccessGuard ],
}
];
@NgModule({
imports: [ RouterModule.forChild(postsRoutes) ],
exports: [ RouterModule ],
providers: [ AccessGuard ]
})
export class PostsRoutingModule { }user-profile-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AccessGuard } from '../shared/guards/access.guard';
import { UserProfileComponent } from './user-profile.component';
import { FollowersComponent } from './followers/followers.component';
import { FollowingComponent } from './following/following.component';
import { MentorsComponent } from './mentors/mentors.component';
import { CoachesComponent } from './coaches/coaches.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { AdminMentorComponent } from './admin-mentor/admin-mentor.component';
const userProfileRoutes: Routes = [
{
path: 'user-profile',
data: { requiresLogin: true },
children: [
{
path: ':id',
data: { requiresLogin: true },
canActivate: [ AccessGuard ],
children: [
{
path: '',
component: UserProfileComponent,
},
{
path: 'followers',
component: FollowersComponent
},
{
path: 'following',
component: FollowingComponent
},
{
path: 'mentors',
component: MentorsComponent
},
{
path: 'coaches',
component: CoachesComponent
},
{
path: 'notifications',
component: NotificationsComponent
}
]
}
]
}
];
@NgModule({
imports: [ RouterModule.forChild(userProfileRoutes) ],
exports: [ RouterModule ],
providers: [ AccessGuard ]
})
export class UserProfileRoutingModule { }问题
基于上述，为什么标题出现在posts路由上，而没有出现在用户配置文件路由上？
编辑
不幸的是，我不能在StackBlitz上模仿这种行为。一切都出现了。我将注释掉我的header.component代码，并将其替换为其他东西，以查看它是否出现。
编辑2
正如我在前面的编辑中提到的那样，我可以正确地模仿这种行为。我唯一能想到的演示我的问题的方法是:当我像这样导航到posts路由时：
<input placeholder="How are you today?" routerLink="/posts/add">在DOM树中，我可以看到正确的路由器出口被瞄准(shell.component中的路由器出口)，post组件(App Post)在它旁边开槽：
然而，用户配置文件的组件并不能做到这一点。相反，他们进入app.component旁边，而不是在shell.component中。我硬编码到用户配置文件的路径如下：
<p routerLink="/user-profile/6">Testing testing</p>测试，但得到了相同的消失头结果。
这对我来说真的很奇怪。两个组件路由都被导入到shell路由.模块中，因此应该将它们的组件插入到它旁边。
那是怎么回事？
另外，我说的对吗?当您试图通过“/some/here”导航时，您使用的是绝对路径，而不是相对路径，因此它应该工作吗？点点
回答 1
Stack Overflow用户
发布于 2018-12-04 09:05:12
之所以会出现这种情况，是因为当您延迟加载模块的角度并将路由定义为子路由时，它的父节点必须包含一个router-outlet才能添加子模块，否则它将无法工作。
另一个关键点是，当进行更改时(例如添加一个延迟加载的模块或修改其路由)，您需要重新启动应用程序并使用--aot标志为其服务：
ng serve --aot若要看到更改生效，请执行以下操作。
https://stackoverflow.com/questions/53373623
复制相似问题
腾讯云开发者
