将相同的事件发送到angular2中的不同函数答案

【问题标题】：send same event to different functions in angular2将相同的事件发送到angular2中的不同函数
【发布时间】：2018-02-01 18:12:51
【问题描述】：

我的主页中有一个搜索表单，其中包含输入框和选择下拉菜单。用户可以通过键入位置或通过 html5 地理位置来搜索其他用户。因此，当用户第一次访问该页面时，它会询问用户是否让应用知道他们的位置。如果他们同意，则从下拉列表中选择纬度经度和选择的选项并运行数据库查询。但是，我不确定我的以下尝试是否应该是这样。因为我还想在用户使用或不使用地理位置进行搜索时绑定选择。我的选择输入是

<div class="input-group-btn">
  <select class="btn btn-danger btn-lg" style="border-radius: 0px;" bindon-ngModel="btype" on-ngModelChange="search($event)" on-ngModelChange="successPosition($event)" name="btype" >
      <option *ngFor="let btype of bloodtypes" [value]="btype">{{btype}}</option>
  </select>
</div>

我在 angular2 组件中的地理定位功能是这样的

geolocation: function(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(this.successPosition,
            this.failurePosition, { 
                                    enableHighAccuracy: true, 
                                    timeout:3000,
                                    maximumAge: 4000 });
    }
    else{
        return(false);
    }
},
successPosition: function(position){
    if(position.coords.latitude && position.coords.longitude){
        self.latitude = position.coords.latitude;
        self.longitude = position.coords.longitude;
    }else{
        self.btype = position;
    }
    window.location.replace("/users?utf8=✓&longitude=" + 
         encodeURIComponent(self.longitude) + "&latitude=" + 
         encodeURIComponent(self.latitude) + "&btype=" + 
         encodeURIComponent(self.btype));
    },

但是当successPosition() 收到参数时，我不能同时分配latitude、longitude 和btype。如果我分配latitude 和longitude，btype 是未定义的，反之亦然。请告诉我这是我该怎么做还是有其他方法？

【问题讨论】：

您能否将事件发送到单个函数。然后让那个函数调用其他函数？
如果我将事件发送到单个函数，那么我还需要发送位置对象来获取纬度和经度。我需要从纬度经度和 btype 形成 url

标签： javascript html angular angular2-forms angular4-forms

【解决方案1】：

这是你要找的吗：

successPosition: function(position){
     self.btype = position;

     self.latitude = (position.coords) ? position.coords.latitude : 'something else';
     self.longitude = (position.coords) ? position.coords.longitude : 'something else';


     window.location.replace("/users?utf8=✓&longitude=" + encodeURIComponent(self.longitude) + "&latitude=" + encodeURIComponent(self.latitude) + "&btype=" + encodeURIComponent(self.btype));
}

【讨论】：

有点，但这里的问题是，如果条件失败，那么只有 self.btype 被分配并且 self.latitude 和 self.longitude 变得未定义。 :(
检查更新的函数，如果 position.coords on fail 仍然设置但 lat lng 未定义，那么你必须在三元运算符的条件下执行position.coords.hasOwnProperty('latitude') 之类的操作
在“其他”部分中，我想检索 self.latitude 和 self.longitude 的旧值，请您格式化代码。
然后只需分别更改 self.latitude/longitude 的“其他”，因为我假设您在全局范围内拥有 self，因此旧值在 self 中可用。请确认编辑答案：D
等一下，但是如果第一次 self.latitude self.longitude 失败，它将是未定义的，你没有以前的值，将这些分组在 if 中是正确的答案，不需要三元运算符。跨度>

【解决方案2】：

除了上面 Sonicd300 的答案之外，问题实际上出在 successPosition 函数中的 if-else 块上。在上面的答案中，他为您提供了通过提供三元运算符来重写函数的选项，请在此处阅读更多信息 - Javascript one line If...else...else if statement

你可以重写这个 -

successPosition: function(position){
     self.btype = position;

     self.latitude = (position.coords) ? position.coords.latitude : 'something else';
     self.longitude = (position.coords) ? position.coords.longitude : 'something else';


     window.location.replace("/users?utf8=✓&longitude=" + encodeURIComponent(self.longitude) + "&latitude=" + encodeURIComponent(self.latitude) + "&btype=" + encodeURIComponent(self.btype));
}

通过编写此内容并指定默认经度和纬度，以防用户在页面加载时未提供。

successPosition: function(position) {
    self.btype = position;
    if (position.coords.latitude && position.coords.longitude){
        self.latitude = position.coords.latitude;
        self.longitude = position.coords.longitude;
    } else {
    self.latitude = 'assign some default latitude'; // you should never assume that this will always be provided by the user on page load
    self.longitude = 'assign some default longitute'
}
window.location.replace("/users?utf8=✓&longitude=" + 
     encodeURIComponent(self.longitude) + "&latitude=" + 
     encodeURIComponent(self.latitude) + "&btype=" + 
     encodeURIComponent(self.btype));
}

【讨论】：