Angular раскрытие типа ввода = переключатель щелчка текста работает только при обновлении страницы

Question

Я реализовал приложение angular 9, которое перемещается от PageA к PageB с помощью routerLink.

Ниже приведен фрагмент маршрутизации в компоненте PageA

  <p class="govuk-!-padding-1"></p>
      <div>
        <button type="button" (click)="goToPageB()" class="govuk-button" data-module="govuk-button" name="go-to-page-b" id="goToPageBtn" mat-raised-button color="success" routerLink="/pageB">Continue</button>
    </div>

Ниже приведен раздел моего HTML / CSS на странице компонентаB

    <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ireland" name="citizen" type="radio" value="ireland" data-aria-controls="conditional-citizenship-conditional-2">
        <label class="govuk-label govuk-radios__label" for="ireland">
          Republic of Ireland
        </label>
    </div>

    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="another" name="citizen" type="radio" value="another" data-aria-controls="conditional-how-contacted-conditional-3">
      <label class="govuk-label govuk-radios__label" for="another">
        Another country
      </label>
    </div>
    <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-conditional-3">
      <div class="govuk-form-group">
        <label class="govuk-label" for="country-name">
          Name of country 
        </label>
        <input class="govuk-input govuk-!-width-one-half" id="country-name" name="country-name" type="text">
      </div>
    </div>
  </div> 

Ниже приведен раздел моего кода в индексе. html

<app-root> </app-root>
<script src="/assets/javascript/govuk-frontend-3.6.0.min.js"></script>
<script>window.GOVUKFrontend.initAll()</script>

</body>
</html>

У меня грязное решение, которое перезагружает страницу в метод ngOnInit компонента PageB выглядит следующим образом:

ngOnInit(): void {
    console.log('PageB init');

   if (!localStorage.getItem('foo')) { 
    localStorage.setItem('foo', 'no reload') 
    location.reload() 
  } else {
    localStorage.removeItem('foo') 
  }
  }

Приведенное выше обновление страницы после ее первой загрузки выглядит как плохое решение для обновления sh страницы в SPA, где страница Обновление не выполняется для AJAX вызовов на сервер, поэтому refre sh для клиентской логики c.

Я попытался повторно вызвать ngOnInit моего AppComponent, добавив следующее в инициация страницы B, но не повезло.

  let appComponent = new AppComponent();
   appComponent.ngOnInit();

Моя проблема заключается в том, что поле ввода открывается при нажатии другой кнопки-переключателя ТОЛЬКО после обновления страницы B.

Когда отображается страница B, отображается первая время, когда ком Например, на странице PageA поле ввода не отображается, когда я нажимаю другую кнопку-переключатель

. Какое наилучшее решение для этой работы при первом отображении страницы PageB при навигации из PageA?

Любые идеи будут оценены. Спасибо