コンポーネントにデータを動的に渡す

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); 

    }); 

そして、ここでは、私が適切な情報をコンポーネントにpasswedますマーカーをクリックすると、その上を通過したい配列データは以下のとおりです。

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

}

任意の助けもappreaciatedされるだろう！ありがとう、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" 
    } 
]