动态地将数据传递给组件答案

【问题标题】：Dynamically pass data to component动态地将数据传递给组件
【发布时间】：2018-05-28 22:46:11
【问题描述】：

我正在使用 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"
  }
];

}

任何帮助将不胜感激！谢谢，Trix。

【问题讨论】：

标签： angular google-maps ionic3 ionic-native

【解决方案1】：

如果您将组件称为角度组件，则可以使用 @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"
  }
]

【讨论】：

感谢您的建议！这帮助了我:)