Angular 6中如何仅初始化变量一次，避免页面刷新后重置？

这个问题的核心在于组件内的变量状态会在页面刷新时丢失——当你刷新/login页面时，AppComponent会重新实例化，myVar被重置为初始值true，导致原本隐藏的内容再次显示。手动通过点击事件修改变量的方式只在单次页面会话中有效，刷新后就失效了。

我们可以利用Angular Router的路由状态来控制内容显示，而不是依赖组件内的局部变量，这样即使刷新页面，路由状态会被正确识别，内容显示逻辑也能正常工作。

方案一：监听路由变化动态更新状态 #

这种方式通过订阅Router的导航事件，根据当前路由自动调整myVar的值：

修改app.component.ts #

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

export class AppComponent implements OnInit {
  myVar = true;

  constructor(private router: Router) {}

  ngOnInit() {
    // 过滤出导航完成的事件，避免重复触发
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 判断当前路由是否是登录/注册页面，更新显示状态
      this.myVar = !(event.url === '/login' || event.url === '/signup');
    });
  }
}

修改app.component.html #

去掉手动修改变量的(click)事件，因为路由变化会自动处理状态：

<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">Login</a></div>
    <div>New user? <a routerLink="/signup">Sign Up</a></div>
  </div>
</div>

方案二：直接在模板中使用路由状态（更简洁） #

不需要组件内变量，直接在模板里通过router.url判断当前路由：

修改app.component.ts #

注入Router并声明为公共变量，让模板可以访问：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

export class AppComponent {
  constructor(public router: Router) {}
}

修改app.component.html #

直接用路由URL作为ngIf的判断条件：

<div class="fullPage">
  <header>Welcome</header>
</div>
<router-outlet></router-outlet>
<div class="fullPage">
  <div *ngIf="!(router.url === '/login' || router.url === '/signup')">
    <h3>Please login or sign up to continue :))</h3><br>
    <div id="x"><a routerLink="/login">Login</a></div>
    <div>New user? <a routerLink="/signup">Sign Up</a></div>
  </div>
</div>

为什么这两种方案有效？ #

Angular Router在页面刷新时会重新解析当前URL，恢复对应的路由状态。无论是通过订阅路由事件还是直接使用router.url，我们的显示逻辑都是基于当前路由的真实状态，而不是组件内的临时变量，所以刷新页面后依然能正确控制内容的显示与隐藏。

内容的提问来源于stack exchange，提问作者Harshit Trehan