Angular组件属性在if块内无法更新的问题求助

各位Angular大佬们好！我最近碰到一个头疼的问题，折腾半天没搞定，来求助了🥺

我想在组件初始化时监听路由跳转事件，当路由跳转到/common/time这个路径时，更新组件的index和trial两个属性，顺便触发视图更新。结果现在代码逻辑好像走通了，但属性就是没真正更新，视图也纹丝不动，代码大概是这样的：

ngOnInit() {          
  this.router.events.subscribe(event => {      
    if (event instanceof NavigationEnd) {        
      if (event.url === '/common/time') {          
        this.zone.run(() => {            
          setTimeout(()=> {              
            this.index = 2;              
            this.trial = "Trial";              
            console.log(`Inside idx: ${this.index}`);             
          }, 100);          
        });        
      }      
    }    
  });      

  console.log(`Outside idx: ${this.index}`);    
  this.loadMonetaryCond... // 后续代码，核心问题在上方的路由订阅逻辑里
}

具体的问题是：

• 控制台里Inside idx确实输出了2，说明代码确实执行到了更新属性的那一步
• 但订阅外面的Outside idx输出的始终是index的初始值（比如0或者undefined）
• 组件视图也完全没更新，页面上还是显示index的旧值

我一开始以为是变更检测的问题，特意用NgZone.run()把更新逻辑包起来了，甚至还加了setTimeout延迟执行，但还是没解决问题。有没有大佬能帮我看看哪里错了？是不是我对路由事件的处理或者Angular变更检测的理解有偏差呀？

备注：内容来源于stack exchange，提问作者Dwarknight