如何根据函数返回值在Angular中显示/隐藏Div元素？

看起来你现在的代码有几个关键问题，导致没法正确控制元素的显示隐藏，我来一步步帮你修正：

问题分析 #

1. Observable处理错误：isLoggedIn$是一个Observable<boolean>，但你在shouldShowRegisterLink()里直接判断!this.isLoggedIn$——这其实是在检查这个Observable对象是否存在，而不是用户的登录状态（异步返回的布尔值），完全逻辑错误。
2. 模板函数的性能与响应性问题：模板里用*ngIf="shouldShowRegisterLink"（你还漏了函数调用的括号()），Angular的变更检测会频繁调用这些函数，不仅影响性能，而且因为Observable是异步的，函数无法实时响应登录状态的变化。
3. 函数缺少默认返回值：shouldShowBlueBanner()只处理了pageName === '/login'的情况，其他场景没有返回值，会返回undefined，而*ngIf会把undefined视为false，导致非登录页面也不显示蓝色横幅。

正确的解决方案：用响应式方式处理（推荐） #

我们可以利用Angular的async管道来自动处理Observable的订阅和取消订阅，同时结合路由信息来构建响应式的显示条件：

1. 组件代码重构 #

首先注入Router来监听当前路由，然后组合Observable得到显示条件：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { AuthService } from 'path-to-your-auth-service';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.template.html'
})
export class YourComponent implements OnInit {
  // 登录状态Observable
  isLoggedIn$: Observable<boolean>;
  // 当前路由路径的Observable
  currentRoutePath$: Observable<string>;
  // 控制蓝色横幅显示的Observable
  shouldShowBlueBanner$: Observable<boolean>;
  // 控制注册链接显示的Observable
  shouldShowRegisterLink$: Observable<boolean>;

  constructor(private authService: AuthService, private router: Router) {}

  ngOnInit(): void {
    // 获取登录状态
    this.isLoggedIn$ = this.authService.isLoggedIn;

    // 监听路由变化，获取当前路径
    this.currentRoutePath$ = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => this.router.url)
    );

    // 计算蓝色横幅的显示条件：不是登录页面时显示
    this.shouldShowBlueBanner$ = this.currentRoutePath$.pipe(
      map(path => path !== '/login')
    );

    // 计算注册链接的显示条件：未登录时显示
    this.shouldShowRegisterLink$ = this.isLoggedIn$.pipe(
      map(isLoggedIn => !isLoggedIn)
    );
  }
}

2. 模板代码修改 #

在模板中使用async管道来订阅Observable，实时更新显示状态：

<div id="registerLink" *ngIf="shouldShowRegisterLink$ | async">
  <a [routerLink]="['/register']">Register</a>
</div>
<app-nav-menu></app-nav-menu>
<div id="blueheader" *ngIf="shouldShowBlueBanner$ | async">
  <!-- 蓝色横幅内容 -->
</div>

简化方案（直接在模板中处理） #

如果你的场景比较简单，也可以直接在模板中结合async管道和路由信息，不需要组件里的额外Observable：

<!-- 注册链接：未登录时显示 -->
<div id="registerLink" *ngIf="!(isLoggedIn$ | async)">
  <a [routerLink]="['/register']">Register</a>
</div>
<app-nav-menu></app-nav-menu>
<!-- 蓝色横幅：当前不是登录页面时显示 -->
<div id="blueheader" *ngIf="router.url !== '/login'">
  <!-- 蓝色横幅内容 -->
</div>

这种方式需要确保你已经在组件中注入了Router，并且模板可以访问到router实例（Angular会自动把组件实例的属性暴露给模板）。

额外注意点 #

• 修正了你模板里[routerLink]的语法错误：原来的[routerLink="['/register']"应该写成[routerLink]="['/register']"（引号位置正确）。
• 避免在*ngIf中调用函数：频繁的函数调用会增加变更检测的开销，用响应式Observable的方式更高效且符合Angular的最佳实践。

内容的提问来源于stack exchange，提问作者Leonardo Wildt