动态传递数据给组件

Question

我正在使用 google-maps native，我正在尝试将标记数组数据传递给附加组件，但找不到任何可行的方法。是否有任何可能的方法可以在以下代码中传递数据：

markerCluster.on(GoogleMapsEvent.MARKER_CLICK).subscribe((params) => {

    let htmlInfoWindow = new HtmlInfoWindow();
    let marker: Marker = params[1];

    console.log(params[1]);

    if(this.compRef) this.compRef.destroy();

    const compFactory = this.resolver.resolveComponentFactory(MapPopup);
    this.compRef = compFactory.create(this.injector);

    this.appRef.attachView(this.compRef.hostView);

    let frame: HTMLElement = document.createElement('div');
    frame.appendChild(this.compRef.location.nativeElement);

    htmlInfoWindow.setContent(frame, {
      width: "230px",
        height: "150px",
    });
    htmlInfoWindow.open(marker);

  });

这是我想传递的数组数据，因此当我单击标记时，相应的信息将传递给组件：

dummyData() {
return [
  {
    "position": {
      "lat": 46.0738144,
      "lng": 18.210416
    },
    "name": "Place 1",
    "rating": "4",
    "restaurantId": "2"
  },
  {
    "position": {
      "lat": 46.0733244,
      "lng": 18.210716
    },
    "name": "Place 2",
    "rating": "3",
    "restaurantId": "3"
  }
];

}

如有任何帮助，我们将不胜感激！谢谢，特里克斯。

Answer 1

如果您将组件称为 angular 组件，您可以使用 @Input() 装饰器并将数据传递给您的组件。在组件本身中，它将是

@Input() passedData: any[];

和父级 html

<custom-component [passedData]="dataToPass"> </custom-component>

并且在你的父 .ts 中，

let dataToPass = [
  {
    "position": {
      "lat": 46.0738144,
      "lng": 18.210416
    },
    "name": "Place 1",
    "rating": "4",
    "restaurantId": "2"
  },
  {
    "position": {
      "lat": 46.0733244,
      "lng": 18.210716
    },
    "name": "Place 2",
    "rating": "3",
    "restaurantId": "3"
  }
]

动态传递数据给组件

Dynamically pass data to component

google-maps

ionic-native

ionic3

angular