Question

我已经阅读了有关ViewContainerRef，ComponentFactoryResolver的内容。

基本上：

将标记放入html
在你的ts中声明以下内容： @ViewChild（'parent'，{read：ViewContainerRef}） parent：ViewContainerRef;
使用以下方法实例化您的组件： const childComponent = this.componentFactoryResolver.resolveComponentFactory（ChildComponent）; this.parent.createComponent（childComponent）;

但是，它在页面加载的html中已经存在。

问题是我使用的是使用谷歌地图api生成的弹出窗口（当您点击地图上某处时出现的弹出窗口）。

我需要在弹出窗口后显示div父标记

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

因此，我尝试将其绑定到弹出窗口中的onclick事件，如下所示：

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

但是，根据屏幕截图，它不起作用。是不是因为页面加载时没有生成div父标记？有人可以帮忙吗？谢谢

Answer 1

最好的解决方案是。你只需去AgmCore

npm install --save @agm/core

为此您需要在ngModule中添加核心模块，如：

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>

希望这能解决您的问题。

动态添加角度分量到新的html元素

1 个答案: