时间戳

首页 > 解决方案 > 拒绝位置后角度组件不起作用

javascript - 拒绝位置后角度组件不起作用

问题描述

我正在为我的 Web 应用程序使用 Angular。我面临以下问题。在我的父模块中，我向用户询问位置权限，如果它接受它会转到一条路线，如果它拒绝，它会转到另一条路线。到目前为止，一切都很好，路由工作正常。但是，问题在于权限被拒绝时必须加载的模块。

我之前没有注意到这一点，因为如果之前权限被拒绝并且配置存储在浏览器中，模块和组件已正确加载，但问题是在第一次询问用户时出现获得许可，他拒绝了。路由正确，但组件不会按预期显示，控制台中也不会显示错误。

组件的html如下：

<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>

如您所见，该页面有 3 个主要部分：

  1. 一段文字
  2. 图像（徽标）
  3. 一个下拉菜单和一个按钮

我正在使用ngx-translate翻译页面的文本。

当它正确加载时，它会显示所有内容，并且在下拉列表中，我可以看到通过 HTTP 调用从服务器获取的选项。但是，当它失败时，我只能看到徽标。

这里是 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
  }
}

如您所见，我所做的只是 onInit，订阅 observable 并调用服务器以检索要在下拉列表中显示的选项。这个调用将更新我已经订阅的 observable。

我添加了 setLang 函数，以防有人认为错误可能相关。

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');
    }
  }
}

标签： javascriptangularrouting

解决方案

通过setTimeout()在ngOnInit

推荐阅读