새로운 html 요소에 각도 요소를 동적으로 추가

Question

ViewContainerRef, ComponentFactoryResolver에 대해 읽었습니다. 기본적으로

: 당신의 HTML에서

1. 넣어 태그

2. 이 당신의 TS에 다음과 같은 선언 @ViewChild ('부모', {읽어 ViewContainerRef}) 부모 : ViewContainerRef을;

3. 다음을 사용하여 구성 요소를 인스턴스화하십시오. const childComponent = this.componentFactoryResolver.resolveComponentFactory (ChildComponent); this.parent.createComponent (childComponent);

그러나 페이지로드시 HTML에서 이미 작동하지 않습니다.

문제는 Google지도 api (지도의 어딘가를 클릭하면 나타나는 팝업)를 사용하여 생성되는 팝업을 사용하고 있다는 것입니다. 그러나

marker.addListener('click',() => { 
     infowindow.open(this.map, marker); 
     const childComponent = this.componentFactoryResolver.resolveComponentFactory(CentreDetailsComponent); 
     this.parent.createComponent(childComponent); 
     }); 

그렇지 않습니다 : 팝업이

var infowindow = new google.maps.InfoWindow({ 
     // content: this.contentString 
     content: " <div #parent></div>" 
    }); 

따라서 나는 다음과 같은 팝업에 온 클릭 이벤트에 바인딩하려고 나타난 후

나는 DIV 부모 태그를 넣을 필요 스크린 샷에 따라 작업하십시오. div 상위 태그가 페이지로드에서 생성되지 않았기 때문입니까? 누군가가 도와 주실 수 있습니까? Thx

Answer 1

최상의 해결 방법은 다음과 같습니다. 당신은 AgmCore 당신처럼 ngModule 핵심 모듈을 추가 할 필요가에 대한

npm install --save @agm/core 

갈 :

import { AgmCoreModule } from '@agm/core'; 
@NgModule({ 
    imports: [ 
     AgmCoreModule.forRoot({ 
      apiKey: 'api_key_googlemap' 
      }) 
    ]}) 

하고 HTML보기 파일의 뜻은 당신이 원하는 경우

<div style="height: 700px; width: 100%;"> 
    <agm-map [latitude]="32.02" [longitude]="52.2" [zoom]="17"> 
     <agm-marker [latitude]="52.2" [longitude]="32.02" title="Name" > 
      <agm-info-window [isOpen]="true" > 
       <h6>Name</h6> 
      </agm-info-window>             
     </agm-marker>     
     </agm-map> 
</div> 

처럼 보인다 마커의 클릭 기능

<agm-marker (markerClick)="yourClickFunction()"></agm-marker> 

호프가 문제를 해결할 수 있기를 바랍니다.