rxjs 在 ngOnInit 中订阅

Question

按钮显示在模板中的 ngIf 上触发。 在此代码之后，按钮未显示。

 public navBackVisible = false
        ngOnInit() {
                this.router.events
                  //.pipe(filter(event => event instanceof NavigationEnd))
                  //.pipe(pairwise())
                  .subscribe(
                  () => this.navBackVisible = true); // here true
        
              console.log(this.navBackVisible); // here false
    }

模板：

 <button *ngIf = "navBackVisible"><icon>arrow_back</icon></button>

升级版：

• 这是所有代码
• ChangeDetection.Default
• 路由器发出事件
• function里面的subscribe叫做
• function 内部订阅在 ngIf 之前触发
• 但是this.http.get(url).subscribe(() => this.navBackVisible = true)工作正常
• 如果我在某些服务的构造函数中编写相同的逻辑并从该组件调用它，那么一切正常

Answer 1

成对（ https://rxjs.dev/api/operators/pairwise ），仅当且仅当至少发出一个值之后才发出值，并且此处的路由器事件仅发出 1 个值然后完成。

Answer 2

您不能同时使用pairwise()和filter(event => event instanceof NavigationEnd) 。 选择一个或另一个，因为pairwise地发出先前值和当前值。 如果您过滤掉最后一个路由器事件（即 NaviationEnd 事件），则您的pairwise永远不会发出，并且您永远不会陷入 function 以打开this.navBackVisible = true 。 至少，这是我对此的理解（如果我错了，请纠正我）。

利用：

    this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .subscribe(() => {
        console.log('i am here');
        this.navBackVisible = true;
      });

Answer 3

结果，ngOnInit 从服务类中调用了 getter 变量。 并且在构造函数中的服务中，我使用了相同的逻辑。 一切正常。 稍后我将变量更改为 sessionStorage（它符合我的逻辑）。 我仍然不知道那是什么。 如果这发生在某人身上，那么这是找到问题的好一步。 该解决方案满足了我的问题，但问题仍然存在，我将按照答案并回答您的澄清。