subscribe内部的router.navigation()将暂停应用程序的功能

Question

我正在尝试将用户登录到我的应用程序，成功登录后，用户将被重定向到主页(/(。

这里一切都很好，用户可以重定向到主页，但我无法通过单击主页上的任何链接进行导航。

然而，在研究了这个问题后，我注意到，当我用login方法(如下所示(将this.router.navigate(['/'], { relativeTo: this.route })从subscribe块中移出时，页面会被重定向到主页，所有功能似乎都正常工作。

我从subscribe块调用this.router.navigate的方式存在一些问题。有人能帮我发现发生了什么吗？谢谢

注意：我在SO上也发现了类似的问题。建议在本地分配router的答案不起作用。Angular版本-11

login(pwd: any){
this.loginService.login(usrname,pwd).subscribe(
(response) =>
{
console.log("success executed");
this.router.navigate(['/'], { relativeTo: this.route }).then(x => console.log("????? "+x));
return;
},
(error) => 
{
console.log("ERRR  == "+JSON.stringify(error));
}
);
}

更新

应用程序路由模块。

{ path: '', loadChildren: () => import('./home-page/home-page.module').then(m => m.HomePageModule) , pathMatch:"full"},
{
path: 'signup',
loadChildren: () => import('./Reg/Reg.module').then(m => m.RegModule) 
},

RegRoutingModule

import { SignUpComponent } from './sign-up/sign-up.component';
const routes: Routes = [
{ path: '', component: SignUpComponent },
{ path: 'signin', component: SignInComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class RegRoutingModule { }

当用户决定登录应用程序时，他们会进入"注册"页面(SignUpComponent(，然后单击"登录"链接(SignInComponent(。这是一个延迟加载的模块。

主页组件也是一个延迟加载的模块。

更新2

主页路由模块

import { HomePageComponent } from './home-page.component';

const routes: Routes = [{ path: '', component: HomePageComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomePageRoutingModule { }

更新3

<div  >
<a [routerLink]="['profile/8']" routerLinkActive="active"> Go to Page 2</a>
<button (click)="navigateToProfile(profId)" >
profile
</button>
</div>


navigateToProfile(profId: number) {
this.zone.run(() => {

this.router.navigate(['profile/'+profId] );
});

注意：我也尝试过不使用this.zone。结果还是一样。这个问题会是Angular 11独有的吗？

注意：只有从subscribe导航页面时才会出现此问题，否则它将起作用。

更新4

Web服务

SignIn(signinModel: SignIn): Observable<boolean> {
return this.httpClient.post<SignInResponse>(this.host + "/api/Sign", JSON.stringify(signinModel), { responseType: "json" })

.pipe(map(e => {
localStorage.setItem("user", e.token);
return e != null ? true:false;
}));

}

如果我评论这句话，一切都很好。将令牌添加到本地存储似乎是个问题。

Answer 1

更新2:

localStorage.setItem("user", e.token);

e.token是字符串还是对象？如果它是一个对象，则应该使用JSON.stringify()和JSON.parse()对其进行序列化和反序列化，因为根据文档，localStorage和sessionStorage只能保存字符串键/值对。

因此，如果你把代码改成这样，它可能会解决问题：

.pipe(map(e => {
localStorage.setItem("user", JSON.stringify(e.token));
return e != null ? true : false;
}));

然后像这样加载：

const user = JSON.parse(localStorage.getItem("user"));

更新：

好吧，经过大量的尝试和错误，我的猜测是，在你进入主页后，所有后续的导航问题都是由app-routing.module.ts的path: ''的pathMatch:"full"引起的。我无法重现您订阅的问题，但整个问题与相关的路由系统非常相关。所以，试着注释掉pathMatch:"full"标志，看看它是怎么回事。

顺便说一句，我在stackblitz中创建了这个测试项目，我试图在那里复制你的实际项目。再仔细查看一下，看看你的代码中是否缺少了什么：https://stackblitz.com/edit/angular-ivy-aqrxbc?file=src/app/app-路由模块.ts

---

很可能是路由配置的问题，甚至是某些路由保护以意外方式行事的问题。

您的HomeComponent使用的是热切加载还是懒惰加载？显示您配置路线的模块会很有帮助，我敢打赌问题就在那里。

---

此外，我很困惑为什么在导航时需要使用{ relativeTo: this.route }。理想情况下，此时不需要任何路线范围界定。