Angular 18中NG0303报错及登录后导航栏不显示问题求助

1. 修复*ngIf语法错误 #

报错核心是<nav>元素上的*ngIf绑定无效，检查navbar.component.html中的代码：

• 确保<nav>标签的结构型指令写法正确，应为：

<nav *ngIf="showNavbar">
  <!-- 导航栏内容 -->
</nav>

• 注意不要写成[ngIf]（属性绑定形式）或者拼写错误*ngif（小写f），结构型指令必须带*前缀且大小写严格匹配。

2. 简化NavbarComponent的订阅逻辑 #

移除不必要的setTimeout和ChangeDetectorRef，Angular会自动检测订阅回调中的变量更新，修改构造函数代码：

constructor(private navbarService: NavbarService) {
  this.subscription = this.navbarService.showNavbar.subscribe(value => {
    this.showNavbar = value;
  });
}

3. 确认NavbarService的实现正确性 #

确保navbar.service.ts中BehaviorSubject的初始值和控制方法正确：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class NavbarService {
  private showNavbarSubject = new BehaviorSubject<boolean>(true);
  showNavbar = this.showNavbarSubject.asObservable();

  // 登录页调用隐藏导航栏
  hideNavbar() {
    this.showNavbarSubject.next(false);
  }

  // 登录成功后调用显示导航栏
  showNavbarFunc() {
    this.showNavbarSubject.next(true);
  }
}

• 在登录组件中，进入页面时调用navbarService.hideNavbar()隐藏导航栏；登录成功后调用navbarService.showNavbarFunc()恢复显示。

4. 调整app.component.html的导航栏渲染逻辑 #

移除<app-navbar>上固定的*ngIf="true"，让NavbarComponent内部控制导航栏的显示：

<app-navbar></app-navbar>
<router-outlet></router-outlet>

导航栏的显示逻辑已经在NavbarComponent内部通过showNavbar变量控制，外层无需额外的条件渲染。

5. 验证基础配置 #

• 确认NavbarComponent的standalone: true配置及CommonModule导入无误（你的代码中这部分已正确配置）。
• 确保登录组件中已正确注入NavbarService，并在对应业务时机调用显示/隐藏方法。

内容的提问来源于stack exchange，提问作者Daniel Valverde