在 Angular 6 中只初始化一个变量一次，而不是在每次页面刷新之后答案

【问题标题】：Initialize a variable only once in Angular 6, not after every page refresh在 Angular 6 中只初始化一个变量一次，而不是在每次页面刷新之后
【发布时间】：2018-11-11 05:51:14
【问题描述】：

我刚刚使用 Angular v6.0.3。我对 AngularJS v1.6.9 有一点经验

我正在设计一个基本网页，其目标网页显示 2 个链接：第一个用于登录，第二个用于注册。在单击“登录”链接时（我添加了（单击）事件），我已将路由设置为“/登录”（登录表单是一个组件），并且还使用 ngIf 来隐藏页面上的原始内容。移动到登录组件后，当我刷新页面“localhost:4200/login”时，我使用 ngIf 隐藏的内容再次显示为我在 ngIf 中使用的变量在刷新时被重新加载为值“true”。

如何解决这个问题？在此先感谢:)

app.component.ts

export class AppComponent  { 
        myVar = true;
        divReplace = function(){ 
         if(this.myVar == true)
          {
          this.myVar = false;
          }
                               }
                                  }

app.component.html

<div class="fullPage">
  <header>Welcome</header>
 </div> 

  <router-outlet></router-outlet>

<div class="fullPage">
 <div *ngIf="myVar">
  <h3>Please login or sign up to continue :))</h3><br>
  <div id="x"><a routerLink="/login" (click)="divReplace()">Login</a> </div>
  <div>New user? <a routerLink="/signup">Sign Up</a></div>
</div>
</div>

Landing page

我希望登录表单下显示的内容即使在刷新后也不显示。我什至尝试使用 constructor() 和 ngOnInit() 使变量只初始化一次，但似乎没有任何效果。即使是网络搜索也没有找到解决方案:(

提前致谢！

【问题讨论】：

使用 cookie 或本地存储。
没有别的办法了吗？对于这个问题，使用 cookie 似乎是一个过度拉伸的解决方案@mentallurg
Hey Harshit 我实现了一种新方法，我只需将记录 ID 放在 URL 中即可消除会话。

标签： angular

【解决方案1】：

这里描述了最简单的方法：

https://stackoverflow.com/a/36183988/2538449

具有持久值的更高级方法是实现一个返回所需类型的Observable 的服务。例如，我正在使用这种方式在用户登录后检索和存储基于服务器的用户设置。

【讨论】：

不太明白。我是否需要创建一个自定义服务来实现这个？
会话和存储仍然是浏览器的底层机制。服务是共享的，但它们不涉及存储。我用购物车遇到了这个问题，即使有可观察的，我也会刷新，购物车现在是空的。我还是得把它写到会话中，否则就走了。
好的。这就解释了。谢谢@DanChase

【解决方案2】：

使用会话来存储信息。这样想，你的浏览器怎么知道用它在你的组件类中所说的以外的任何东西来初始化这个值？ HTTP 是无状态的，每次刷新都是新的，所以你需要存储和会话。

【讨论】：

好的。我猜这是唯一的方法。非常感谢！ :))
如果你确实找到了我很想知道的方法。一件事是会话只能是字符串，因此如果您尝试存储模型类，则在 json.stringify 时会丢失方法。你的问题可能有点离题，但我想我会提到它。
会话需要cookie，你必须在你的服务器上实现相应的逻辑。但是如果你将你的值存储在 cookie 中，你就不需要 session，你不需要在服务器上实现任何东西，这可能会容易得多。
@mentallurg 为什么不写答案？作为评论，它看起来没有回答。我看到了 cookie 评论，但试图通过使答案更可靠来增加价值。您是否只是想在不输入太多内容的情况下快速给出答案？