升级到角度6.0后，角度组件内容不会显示

Question

我将Angular 5.2项目升级到Angular 6，包括升级rxjs和安装rxjs-compat。

我有一个目标网页，为模板中包含的顶部栏组件设置输入变量 isLoggedIn 。问题是，自升级以来，顶部栏内容在此页面中根本不显示。

查看Chrome开发工具上的元素，我可以看到着陆组件和顶栏组件的一行，但没有我期望的内容。

但是，如果我将顶部栏组件直接放入App组件中，它会按预期显示（但我不想在那里）。当然，应用程序组件有一个登录页面的路由器插座，然后应包含顶部栏组件。

Ngrx工作正常，设置状态，选择器工作正常。

知道会发生什么事吗？

以下是相关代码：

登陆组件html：

<wvr-top-bar [isLoggedIn]="loggedIn$ | async"></wvr-top-bar>
<router-outlet></router-outlet>

着陆组件ts：

import { Component, OnInit } from '@angular/core';

import {Router} from '@angular/router';
import {CognitoService} from '../../services/cognito.service';
import {Observable} from 'rxjs/Observable';
import {select, Store} from '@ngrx/store';

import * as fromUser from '../../reducers';

@Component({
  selector: 'wvr-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.css']
})
export class LandingComponent implements OnInit {

  loggedIn$: Observable<boolean>;

  constructor(
    private router: Router,
    public cognito: CognitoService,
    private store: Store<fromUser.State>) {

    this.loggedIn$ = this.store.pipe(select(fromUser.getLoggedIn));
  }

  public ngOnInit() {
    this.loggedIn$
      .subscribe((isLoggedIn) => {

        if (!isLoggedIn) {
          this.router.navigate(['login']);
        }
      });
  }
}

顶栏html

<div class="center-top">
  <a class="navbar-brand" href="#"><img src="../../../../assets/wvr-b.svg" alt=""></a>
</div>

<nav class="navbar navbar-inverse navbar-expand-md bg-color2">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <!--<span class="navbar-toggler-icon text-light"></span>-->
    <i class="fa fa-bars"></i>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">
        <a class="nav-link" href="#"><span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Studio</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Resources
        </a>

      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Future Feature</a>
      </li>
    </ul>
  </div>
</nav>
<div class="secondary-nav float-right">
  <ul class="navbar-nav">
    <li class="nav-item" *ngIf="isLoggedIn" (click)="logout()"><a class="nav-link" href="#">Sign Out</a></li>
    <li class="nav-item" *ngIf="!isLoggedIn" (click)="login()"><a class="nav-link" href="#">Log In</a></li>
    <li class="nav-item" *ngIf="isLoggedIn" routerLink='profile'>Profile</li>

    <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
  </ul>
</div>

顶栏组件ts：

import {Component, Input} from '@angular/core';
import {CognitoService} from '../../../user/services/cognito.service';
import {Router} from '@angular/router';

@Component({
  selector: 'wvr-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.css']
})
export class TopBarComponent {

  @Input() isLoggedIn;

  constructor(public cognito: CognitoService, private router: Router) { }

  logout() {
    this.cognito.signOut();
  }

  login() {
    this.router.navigate(['login']);
  }

}

App Component ts：

import {Component, OnInit} from '@angular/core';
import {CognitoService} from '../../../user/services/cognito.service';
import {Router} from '@angular/router';
import {Store} from '@ngrx/store';
import * as fromUser from '../../../user/reducers';
import {Observable} from 'rxjs/Observable';


@Component({
  selector: 'wvr-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  loggedIn$: Observable<boolean>;

  constructor(public cognito: CognitoService, private router: Router, private store: Store<fromUser.State>) {
    this.cognito.getCurrentUser();
    this.loggedIn$ = this.store.select(fromUser.getLoggedIn);

  }

  ngOnInit() {
    this.loggedIn$.subscribe((isLoggedIn) => {
      isLoggedIn ? this.router.navigate(['landing']) : this.router.navigate(['login']);
    });
  }
}

来自devtools的元素检查：

征兆