动态地将数据传递给组件

Question

我正在使用谷歌地图本机，我试图将标记数组数据传递给附加组件，但无法找到任何可行的方法。是否有任何可能的方法来传递以下代码中的数据：

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。

Answer 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"
  }
]