我的路由模块设置
app-routing.module.ts
{
path: '', pathMatch: 'full', canActivate: [AuthGuard],
component: HomeComponent,
},
{
path: 'profile', component: ProfileComponent, canActivate: [AuthGuard],
children: [
{
path: 'edit', component: EditComponent
},
{
path: ':username', component: UserComponent
}
}
Profile.component.html
<router-outlet></router-outlet>
登录我的应用程序成功后，服务器会响应一个用户，并BehaviorSubject用来发出新用户
在导航栏组件中，我订阅并将其存储到属性用户
验证服务
user = new BehaviorSubject(null)
login() {
this.http.post('/api/login', {username, password})
.subscribe((userResponse) => this.user.next(userResponse))
}
App.component.html
<div *ngIf="isLoggedIn">
<app-navbar></app-navbar>
<router-outlet></router-outlet>
</div>
<div *ngIf="!isLoggedIn">
<router-outlet></router-outlet>
</div>
App.component.ts
isLoggedIn: boolean = false;
ngOnInit() {
this.authService.user
.subscribe((user) => {
if (user === null) {
this.router.navigate(['/login']);
this.isLoggedIn = false;
}
else {
this.isLoggedIn = true;
}
})
}
Navbar.component.html
<a routerLink="/" class="pt-3 pb-3 pl-4 pr-4 active">Home</a>
<a [routerLink]="['/profile', user.username]" class="pt-3 pb-3 pl-4 pr-4">Profile</a>
问题是当我单击Profile时，地址栏中的url如预期那样更改为/ profile / abc，AuthGuard也可以正常工作并返回true，但是UserComponent未呈现。我仍然留在HomeComponent中
但是，当我在页面上按F5键时，UserComponent已加载，并且导航栏路由正常运行。
我认为问题出在我App-routing.module.ts或routerLink
任何帮助表示赞赏
您app.component.html应该看起来像这样：
<div *ngIf="isLoggedIn">
<app-navbar></app-navbar>
</div>
<router-outlet></router-outlet>
对<router-outlet>应在启动时加载。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句