离子2刷新视图

时间:2017-09-27 11:20:50

标签: ionic-framework ionic2

在Ionic中,当启用位置时,应用程序如何自动刷新视图。

这是我的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group" id="accordion">
  <div class="panel panel-default bg">
    <div class="panel-heading bg">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
</div>

如果应用程序启动时未启用位置,则必须先杀死应用,然后再打开位置,再次启动应用以获取位置。当我打开位置,应用刷新视图和显示位置时,如何在后台自动更改

1 个答案:

答案 0 :(得分:0)

除非我误解了您的要求,否则您希望在用户可用时开始跟踪用户的位置(但最初已将其关闭,重新启动它的唯一方法是在您启用它之后)。

<强>原因

假设this.platform.ready()位于app.component(这是它的默认位置),

diagnostic.isLocationAvailable()只会被调用一次。因此,这会在应用开始时触发,我希望watchPosition() 解析为假,或被拒绝。

因此,除非您启用按钮点击,否则无法重新触发所述代码。

<强>解决方案

const subscription = this.geolocation.watchPosition()
  .filter((p) => p.coords !== undefined) //Filter Out Errors
  .subscribe(position => {
    console.log(position.coords.longitude + ' ' + position.coords.latitude);
    subscription.unsubsribe();
  });

https://ionicframework.com/docs/native/geolocation/#watchPosition

  

观看当前设备的位置。通过取消订阅Observable更改来清除手表。

但是,我不确定如果禁用位置,这是否会运行。如果您观看该位置,您可以在获得第一次ping后取消订阅:

{{1}}

我不确定如果物理位置被禁用会发生什么。但我不相信那里有听众。