Angular中获取上一页URL后无法用ngIf显示内容的问题

核心问题：状态残留导致条件判断失效 #

你遇到的页面空白问题，本质是状态变量未重置：每次导航事件触发时，没有把isHome、isStore等变量恢复初始值，导致之前访问页面的状态残留，最终所有!isXXX的判断都为false，所有*ngIf条件不满足，页面无内容。

另外，HTML中的条件写法冗余且易混淆，也会增加调试难度。

修复步骤 #

1. 重置状态变量（关键） #

在每次处理上一页URL前，先把所有状态变量重置为false，避免历史状态干扰：

previousUrl: string = '';
currentUrl: string = '';
isHome: boolean = false;
isChallenges: boolean = false;
isSchedule: boolean = false;
isStore: boolean = false;

constructor(public router: Router) { }

ngOnInit(): void {
  this.router.events.pipe(
    filter((event): event is NavigationEnd => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    this.previousUrl = this.currentUrl;
    this.currentUrl = event.url;
    console.log('previous url: ', this.previousUrl);

    // 重置所有状态变量，避免历史残留
    this.isHome = false;
    this.isChallenges = false;
    this.isSchedule = false;
    this.isStore = false;

    const URL = this.previousUrl;
    if (URL.includes('Home')) {
      this.isHome = true;
    }
    if (URL.includes('Challenge')) {
      this.isChallenges = true;
    }
    if (URL.includes('Schedule')) {
      this.isSchedule = true;
    }
    if (URL.includes('Store')) { 
      this.isStore = true;
    }
  });
}

2. 简化HTML条件写法 #

把冗余的!isHome==true简化为!isHome（或isHome === false），逻辑更清晰：

<div *ngIf="!isHome">
    <p>am i getting home</p>
</div>
<div *ngIf="!isStore">
    <p>am i getting store</p>
</div>
<div *ngIf="!isSchedule">
    <p>am i getting schedule</p>
</div>

更可靠的替代方案：路由状态传递来源页 #

依赖previousUrl的方式存在局限性（比如刷新页面后状态丢失），更推荐在导航时主动传递来源信息：

1. 在来源页面（如Store）导航时添加状态：

// Store组件中的导航逻辑
this.router.navigate(['/help'], { state: { from: 'Store' } });

2. 在Help页面直接读取状态：

// Help组件中
ngOnInit(): void {
  const fromPage = this.router.getCurrentNavigation()?.extras.state?.['from'];
  
  // 重置状态
  this.isHome = false;
  this.isChallenges = false;
  this.isSchedule = false;
  this.isStore = false;

  switch(fromPage) {
    case 'Home':
      this.isHome = true;
      break;
    case 'Challenge':
      this.isChallenges = true;
      break;
    case 'Schedule':
      this.isSchedule = true;
      break;
    case 'Store':
      this.isStore = true;
      break;
  }
}

内容的提问来源于stack exchange，提问作者T. Gregory