임의 위치 입체 4/강제 ViewChild 감지로 구성 요소 렌더링

Question

내 Angular 4 응용 프로그램은 타사 라이브러리 (mapbox)를 사용하여 페이지의 내용을 렌더링합니다. 내가 원하는

map.on('click', 'places', function (e) { 
    new mapboxgl.Popup() 
     .setLngLat(e.features[0].geometry.coordinates) 
     .setHTML('<div>this is a popup</div>') 
     .addTo(map); 
}); 

: 팝업은 다음과 같은 코드로 호출 https://www.mapbox.com/mapbox-gl-js/example/popup-on-click/

: 그 라이브러리는 팝업은 사용자가지도에 핀을 클릭 할 때 표시 할 수있는 팝업 대화 기능이 있습니다 Angular 4+ 구성 요소를 팝업 div에 렌더링합니다. 시도한 것 :

1) @ViewChild를 해당 팝업 div에 바인딩합니다.

// in the component that holds the map component 
@ViewChild("pop", { read: ViewContainerRef }) childContainer: ViewContainerRef; 

//when the user clicks the popup 
popup.setHTML("<div #pop></div>") 

childContainer가 할당되지 않습니다. 팝업이 열린 후 몇 초 기다리려고했거나 을 내 구성 요소의 ChangeDetectorRef에 호출했습니다. 나는 NgZone.runOutsideAngular()에서 팝업을 열어 본 다음 detectChanges()을 수동으로 실행하려고 시도했습니다.

div를 수동으로 HTML 템플릿에 추가하면 팝업이 해당 div의 위치에 예상대로 렌더링됩니다. 사업부의 내용은 여기 <!----> 대체되는 ID

//when the user clicks the popup 
popup.setHTML("<div id="pop">HERE</div>") 

const element = this.elRef.nativeElement.querySelector("#pop"); //this is found 
const factory = this.componentFactoryResolver.resolveComponentFactory(PopupComponent); 
const component = factory.create(this.viewContainerRef.injector, null, element); 

와 DIV로 공장을 사용하여 렌더링

2). 명확하게 Angular는 해당 위치에 을 렌더링하지만 실제 구성 요소는 렌더링하지 않습니다. 다른 인젝터가 필요합니까? 구성 요소가 직접 팝업으로 요소를 렌더링 배치

3) :

popup.setHTML("<popup-component></popup-component>") 

그것은 결코 실제 구성 요소 자체로 변합니다. detectChanges() 또는 NgZone과 같은 경우에도 실행됩니다.

4) 다른 아이디어가 있습니까? 각도 요소를 각도 이외의 임의의 html 위치에 렌더링하려면 어떻게해야합니까?

Answer 1

표준 .append 호출을 사용하여이 문제를 해결할 수있었습니다. 나는이 솔루션을 좋아하지 않지만 작동하는 것처럼 보이고 너무 많은 단점이 없으므로 다른 사람들이이 질문을 찾을 수 있도록 여기에 게시하고 있습니다.

는지도와 같은 페이지에 숨겨진 구성 요소를 추가

//map.component.ts 
popupLocation: any; 
selectedId: any; 
initializeMap(): void { 
    this.map.on("click", "pinLayer", (e: MapMouseFeaturesEvent) => { 
    this.selectedId = e.features[0].properties["id"]; // assumes a distinct id per pin 
    new mapboxgl.Popup({ closeButton: false }) 
      .setLngLat(e.lngLat) 
      .setHTML("<div id='popupLocation'></div>") 
      .addTo(this.map); 
    this.popupLocation = this.elementRef.nativeElement.querySelector("#popupLocation); 
    }); 
} 

사용 위의 정보를 팝 요소에 전달 클래스 속성 ID로

//map.component.html 
<div id="map"></div> 
<div style="display:none"> 
    <info-popup #infopop [id]="selectedId" [renderTo]="popupLocation"></info-popup>  
</div> 

바인드 클릭 한 팝업을 그 구성 요소에 추가 :

이것은 infopop.component.ht의 바운드 [click] 이벤트에서 작동했습니다. ml가 올바르게 통과합니다.