Question

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

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

该组件的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个主要部分：

文本
图片（徽标）
一个下拉菜单和一个按钮

我正在使用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，订阅可观察对象，然后调用服务器以检索要显示在下拉列表中的选项。该调用将更新我已订阅的可观察对象。

我添加了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');
    }
  }
}

Answer 1

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

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

1 个答案: