为了账号安全,请及时绑定邮箱和手机立即绑定

Angular2-组件到动态创建的元素中

Angular2-组件到动态创建的元素中

心有法竹 2019-11-20 09:57:33
我使用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 回答

  • 1 回答
  • 0 关注
  • 905 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信