Question

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

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

如何解决这个问题？在此先感谢：）

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

Login page after click on "login" link

Login page after refresh

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

提前致谢！

Answer 1

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

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

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

Answer 2

使用会话存储信息。可以这样想一想，您的浏览器如何知道使用除组件类中的内容之外的任何内容来初始化值？ HTTP是无状态的，每次刷新都是新的，因此您需要存储和会话。

仅在Angular 6中初始化变量一次，而不是在每次刷新页面

2 个答案: