升级Angular 6后顶部栏组件内容不显示问题求助

听起来你遇到的是Angular和rxjs版本升级后的典型隐性问题——组件标签能被渲染但内部内容不显示，大概率和rxjs的用法兼容问题、输入变量的数据流异常有关。结合你的场景，我给你几个具体的排查和解决方向：

• 检查rxjs操作符的写法兼容性
  Angular 6对应的rxjs 6对操作符调用方式做了重大调整，虽然你安装了rxjs-compat来兼容旧代码，但某些场景下还是会出现隐性bug。比如之前你可能用链式调用操作符：

  this.authService.isLoggedIn$.map(user => !!user).subscribe(...)
  

  现在需要改成rxjs 6标准的pipe写法：

  import { map } from 'rxjs/operators';
  // ...
  this.authService.isLoggedIn$.pipe(
    map(user => !!user)
  ).subscribe(...)
  

  即使rxjs-compat理论上支持旧写法，我还是建议你逐步迁移到新写法，避免潜在的兼容隐患。

• 验证输入变量isLoggedIn的传递和取值
  组件标签存在但内容不显示，很可能是isLoggedIn的值不符合预期，导致模板里的条件渲染（比如*ngIf）不生效。你可以在顶部栏组件的ngOnInit钩子中打印这个值：

  ngOnInit() {
    console.log('isLoggedIn value:', this.isLoggedIn);
  }
  

  同时在顶部栏模板里临时添加{{ isLoggedIn }}，确认这个值是否正确传递过来。如果值不对，就要检查着陆页中给顶部栏传值的逻辑，比如是不是数据流在rxjs升级后没有正确触发。

• 排查变更检测策略的影响
  如果你的顶部栏组件用了ChangeDetectionStrategy.OnPush，升级后可能因为数据流的变化导致变更检测没有触发。你可以临时把变更检测策略改成Default试试：

  import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
  
  @Component({
    selector: 'app-top-bar',
    templateUrl: './top-bar.component.html',
    changeDetection: ChangeDetectionStrategy.Default // 临时修改
  })
  export class TopBarComponent {
    @Input() isLoggedIn: boolean;
  }
  

  如果修改后内容正常显示，那说明你需要调整OnPush策略下的变更触发逻辑，比如确保输入变量的引用变化，或者在数据流更新时手动调用changeDetectorRef.markForCheck()。

• 确认rxjs和rxjs-compat的版本匹配
  打开你的package.json，检查rxjs和rxjs-compat的版本是否完全一致。比如如果rxjs是6.6.7，那rxjs-compat也必须是6.6.7，版本不匹配会导致各种奇怪的兼容问题。如果版本不一致，重新安装对应版本即可：

  npm install rxjs@6.6.7 rxjs-compat@6.6.7 --save
  

• 检查控制台的隐性报错
  有时候组件初始化失败不会直接导致页面崩溃，但会让内容不渲染。打开Chrome开发者工具的Console标签，看看有没有红色的错误提示，比如操作符找不到、Observable订阅失败之类的信息，这些往往是问题的根源。

按照上面的步骤一步步排查，应该能快速定位并解决问题。

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