我使用Google Maps JavaScript API,并且必須在InfoWindow中顯示一個Angular組件。在我的項目中,我使用該Jsonp服務加載了Google Map API 。比我有google.maps.Map可用的對象。稍后,在組件中,我創建了一些標記并將單擊偵聽器附加到它們:打字稿:let marker = new google.maps.Marker(opts);marker.setValues({placeId: item[0]});marker.addListener('click', (ev: google.maps.MouseEvent) => this.onMarkerClick(marker, ev));然后在click處理程序中,我想打開一個包含Angular組件的信息窗口:打字稿:private onMarkerClick(marker: google.maps.Marker, ev: google.maps.MouseEvent) { var div = document.createElement(); this.placeInfoWindow.setContent(div); // Magic should happen here somehow // this.placeInfoWindow.setContent('<app-info-view-element></app-info-view-element>'); this.placeInfoWindow.open(this.map, marker);}我最后要做的是一些普通的JS:打字稿: private onMarkerClick(marker: google.maps.Marker, ev: google.maps.MouseEvent) { let div = document.createElement('div'); div.className = 'map-info-window-container'; div.style.height = '140px'; div.style.width = '240px'; this.placeInfoWindow.setContent(div); this.placeInfoWindow.open(this.map, marker); this.placesService.getPlace(marker.get('id')).subscribe(res => { this.decorateInfoWindow(div, res.name, marker); }, error => { this.decorateInfoWindow(div, ':( Failed to load details: ', marker); }); }據我了解,問題是創建動態組件的唯一可行方法是使用Angulars ViewContainerRef:如何在容器中放置動態組件但是沒有文檔或示例,沒有描述如何ViewContainerRef從動態創建的元素創建。強制框架以某種方式處理DOM是否可行?由于它在許多線程中都被聲明為:“ Angular不處理innerHTML或appendChild”。這是一個完全的死胡同嗎?第二:是否可以使用Renderer實現?(不熟悉),我看過這個Canvas Renderer實驗,從理論上講,我猜想它也可以在Google地圖上使用,因為我們可以推斷出該地圖只是一種特殊的畫布。它在最新版本中仍然可用還是已更改?DomRenderer不在文檔中,但是可以在源代碼中找到它。
- 1 回答
- 0 關注
- 954 瀏覽
添加回答
舉報
0/150
提交
取消