了解 Angular 中的异步订阅

问：

我觉得我的问题与异步编程有关，因为当我想要它时没有运行。我通常将我的问题分为用户的角度和开发人员的视角。subscription

用户视角：

当用户位于主页上并单击“主页”导航按钮时，网站将刷新。用户不觉得这有吸引力，并希望它，因为如果用户在主页上并点击主页，那么什么都不会发生。导航图片如下。如果用户在主页之外，那么（显然）如果他们单击主页，那么他们应该被重定向到主页。

开发者观点：

在模板初始化期间，代码将检查路由器 URL 是否为 。如果是，则 href 应等于 ，如果不是，则 href 应等于 。下面提供了注释代码。/en/home/en/home#/en/home

杂项服务：

// service that does miscellaneous things, one of which is just detecting a url change
@Injectable({
    providedIn: 'root'
})
export class MiscellaneousService {
    urlChange = new Subject<string>()

    // other properties & methods
}

标头 TS 组件：

export class HomeHeaderComponent implements OnInit {
  currentURL: string = ''
  isHomeRoute: boolean = true
  constructor(private misService: MiscellaneousService, private router: Router) {}
 

  ngOnInit(): void {
    /*
      IMPORTANT READ:
        on every page, we will do a 'urlChange.next()' method to ensure the currentURL is updated.
        I would suppose that the urlChange.next(this.router.url) works but what I am sure of is that the
        subscription does not work as currentURL is always an empty string. I would suppose that this has
        to do with the asyncronousity of subscribe and when it runs. If that is the case, how can I fix this so that 
        the component is always updated to the current URL the user is on?
    */
    this.misService.urlChange.next(this.router.url) 
    this.misService.urlChange.subscribe(currentURL => {
      this.currentURL = currentURL
    })
    console.log(this.currentURL)
    if (this.currentURL == '/en/home') {
      this.isHomeRoute = true
    }
    else {
      this.isHomeRoute = false
    }
  }

那么我怎样才能做到，以便我们订阅任何更改？我需要更改什么？router.url

有关更多参考，下面是模板中作为标题的部分

标题模板：

      <a class="nav-link" [href]="isHomeRoute ? '#' : '/en/home'">
           home<span class="sr-only">(current)</span>
      </a>
      <!-- Other code... -->