Angular 2如何通过输入将数据从组件传递到服务? [英] Angular 2 how do I pass data from an component to an service with inputs?

问题描述

首先，我有一个看起来像这样的界面:

First of all I have an interface which looks like this:

 export interface OverlayViewOptions {
   position: LatLng|LatLngLiteral;
   map?: GoogleMap;
   draggable?: boolean;
   objectId?: string;
}

我确实获得了Inputs传递的位置，现在我想传递objectId

I do get the position passed by Inputs, now I want to pass the objectId

这里是我需要数据的班级:

Here the Class where I need the data:

 export class OverlayViewBla {
      public latlng : any;
      overlayView: any;

  constructor(options: any, google: any) {
    console.log(options);


    var self = this;
    this.overlayView.draw = function() {
      var div = this.div;

      if (!div) {

        div.innerHTML = '<span class="number-id">9</span>';

    }
  }

  getOverlayView() : any {
      return this.overlayView;
    }
}

和指令google-map-overlay-view.ts:

And the directive google-map-overlay-view.ts:

@Directive({
  selector: 'sebm-google-map-overlay-view',
  inputs: ['latitude', 'longitude', 'objectId'],
  outputs: ['markerClick', 'dragEnd']
})
export class SebmGoogleMapOverlayView implements OnDestroy,
    OnChanges, AfterContentInit {

  latitude: number;

  longitude: number;

  objectId: string;

这是名为google-maps-api-wrapper.ts的文件中的createOverlayView:

Here is the createOverlayView in file named google-maps-api-wrapper.ts:

  createOverlayView(options: mapTypes.MarkerOptions = <mapTypes.MarkerOptions>{}):
    Promise<mapTypes.OverlayView> {
      return this._map.then((map: mapTypes.GoogleMap) => {
         console.log('options');
         var overlay = new mapTypes.OverlayViewBla(options, google);
         var overlayView = overlay.getOverlayView();
         overlayView.setMap(map);

         return overlayView;
    }
  );
}

这里是名为overlay-view-manager.ts的文件中的addOverlayView方法

And here the addOverlayView method in file named overlay-view-manager.ts

export class OverlayViewManager {
  addOverlayView(overlayView: SebmGoogleMapOverlayView) {
     console.log(overlayView.idObject,'test'); // where this is undefined
      const overlayViewPromise = this._mapsWrapper.createOverlayView({
      position: {lat: overlayView.latitude, lng: overlayView.longitude},

    });

    this._overlayViews.set(overlayView, overlayViewPromise);
  }

和html模板，其中objectId需要作为id输入:

and the html template where objectId needs to be the id input:

<sebm-google-map-overlay-view *ngFor="let location of locations" [latitude]="location.lat" [longitude]="location.lng" [objectId]="location.id"></sebm-google-map-overlay-view>

和app.component.ts:

and the app.component.ts:

locations: marker[] = [
{id: '1',  lat: 51.5239935252832,    lng:  5.137663903579778,   content: 'Kids Jungalow (5p)'},
  ]

如何像传递纬度和经度一样传递id

How do I pass the id like I pass the lat and long

推荐答案

我不知道您到底在哪里出错.可能在 google-maps-api-wrapper.ts 中:

I don't know where exactly you went wrong. Probably here in google-maps-api-wrapper.ts:

createOverlayView(options: mapTypes.MarkerOptions = <mapTypes.MarkerOptions>{}):

应该是 OverlayViewOptions ，而不是 MarkerOptions .

此外，我为您创建了plunkr https://plnkr.co/edit/5RhqdjzjKhYzqvjvDj4p?p=预览

Moreover i created the plunkr for you https://plnkr.co/edit/5RhqdjzjKhYzqvjvDj4p?p=preview

希望有帮助！

这篇关于Angular 2如何通过输入将数据从组件传递到服务?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！