拒绝位置后角组件无法正常工作

Question

I'm using Angular for my web application. I'm facing the following problem. In my parent module, I ask the user for location permissions, and in case that it accepts it goes to a route, in case it rejects, it goes to another route. Up to this point, everything is fine, the routing is working correctly. However, the problem comes with the module that must be loaded when the permission is denied.

I had not noticed this before because, in case that the permissions had been denied before and the configuration was stored in the browser, the module and the component were loaded correctly, but the problem comes when it is the first time that the user is asked for the permission and he rejects it. The routing is correct, but the component won't display as supposed, and no error shows in console.

The html of the component is the following :

<div class="no-location">
  <div class="container-fluid">
    <div class="row div-aligned-middle-middle message">
      {{ 'noLocation.title' | translate }}
    </div>
    <div class="row div-aligned-middle-middle">
      <div class="logo">
        <img width="140px" src="assets/img/logo">
      </div>
    </div>
    <div id="submit" hidden>
      <ngx-dropdown class="div-aligned-middle-middle" [optionList]="list" (selected)="selectedOption($event)"></ngx-dropdown>
      <div class="row btn-submit mx-auto div-aligned-middle-middle" (click)="submitOption()">
        <div>
          {{ 'noLocation.button' | translate }}
        </div>
      </div>
    </div>
  </div>
</div>

As you can see, the page has 3 main parts:

1. A text
2. A image (logo)
3. A dropdown and a button

I'm using ngx-translate to translate the texts of the page.

When it is loading correctly, it shows everything, and in the dropdown, I can see the options that I fetch from my server via an HTTP call. However, when it fails, I can only see the logo.

Here goes the TS:

  constructor(private optionsService: OptionsService, private router: Router, private translate: TranslateService) {
  }

  ngOnInit() {
    setLang(this.translate);
    this.optionsService.fetchAllOptionsFromServer();
    this.optionsService.getOptionsObservable().subscribe(next => {
      document.getElementById('submit').hidden = false;
      this.list = next.map(optionDto => optionDto.name);
    });
  }

  selectedOption(str) {
    // do stuff
  }

  submitOption() {

    // do stuff
  }
}

As you can see, all I do is onInit, subscribe to the observable and call the server to retrieve the options to be shown in the dropdown. This call will update the observable which I have already subscribed to.

I add the setLang function just in case somebody thinks the error can be related.

export function setLang(translate: TranslateService, lang: string | null = null) {
  if (lang !== null) {
    translate.setDefaultLang(lang);
  } else {
    const locale = navigator.language.substr(0, 2);
    const availableLocales = ['es', 'en'];
    if (availableLocales.indexOf(locale) !== -1) {
      translate.setDefaultLang(locale);
    } else {
      translate.setDefaultLang('en');
    }
  }
}

Answer 1

通过在ngOnInit添加setTimeout()来解决此ngOnInit