直到页面重新加载后，本地存储才会加载

Question

我要登录我的用户，然后在导航栏中显示其名称。在我的服务中，我设置了本地存储用户。然后我在组件中有以下代码：

onLoginSubmit() {
    this.submitted = true;
    this.mainService.loginUser(this.loginForm.value.username, this.loginForm.value.password).subscribe(
        data => {
            this.user = data.data;
            this.router.navigate(['/']);
        }, error => {
            this.errorAtLogin = error.error.errorUser;
        }, () => {
    });
}

我不想重新加载页面，因为它看上去很笨拙，并且会闪烁屏幕并重新构建它。但是，如果我在router.navigate之后重新加载页面，它将起作用。

所以我的问题是：

• 我在做什么错了？
• 为什么我调用本地存储项时未设置自身？为什么需要重新加载页面才能工作？