동적으로 데이터를 구성 요소에 전달합니다.

Question

Google Map이 네이티브로 작업 중이며 첨부 된 구성 요소에 마커 배열 데이터를 전달하려고하지만 작동 할 수있는 방법을 찾을 수 없습니다. 여기

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