我在身份验证服务中有一个Logout（）函数，如下所示：

export class AuthService {

isAuthenticated = new BehaviorSubject(false);

constructor(private router: Router) { }

  Logout()
  {
    console.log('Logout')
    if(this.isAuthenticated.value === true)
      {this.isAuthenticated.next(false);}
    this.router.navigateByUrl('login')
  }
}

从我的副菜单中调用它，它工作得很好。
但是，如果我从我的app.component.ts调用它，如下所示：

constructor(private auth: AuthService)
  {this.auth.isAuthenticated.subscribe((x)=>{
    if(this.auth.isAuthenticated.value === false)
    {
      this.auth.Logout();
    }
  })}

函数被调用（console.log（'logout'）工作），但我没有被路由
为了测试这个函数，我在我的主页上做了一个按钮，将isAuthenticated设置为false。

export class HomePage {

  constructor(private auth: AuthService) {}

  Test()
  {
    this.auth.isAuthenticated.next(false);
  }

}

调用注销，但不起作用

• 〉“Logout”在控制台中登录，但没有路由
• 〉将按钮更改为直接调用Logout（）函数就可以了

Test()
  {
    this.auth.Logout();
  }

从相同页面上的侧边菜单调用相同注销功能即可正常工作
我没有收到任何错误消息。
从app.component调用时函数不起作用的原因是什么？如何使其起作用？
提前感谢任何帮助。
附言：我百分百肯定
1.调用注销功能。
1.路由调用不在if循环中
附加信息：isAuthenticated在Logout（）时应该为false。if循环检查isAuthenticate是否为true并将其设置为false只是为了安全起见
Stackblitz（在为我启动开发服务器时卡住，但所有代码都在那里）