angular

Question

我正在我的 angular 项目中实施 mapQuest。地图工作正常，也显示弹出窗口，但我在访问另一个组件 HTML 文件时遇到问题。我设法稍微解决了它，但我认为这不是正确的解决方案。

在弹出窗口中，我想显示另一个我有 table 的组件。我还需要提供意见。

示例：

Parent html:

<div id="map" style="height: -webkit-fill-available; width: -webkit-fill-available;">       
     </div> 

   <app-basicInfo [input]="testInput"></app-basicInfo>

这个 app-basicInfo 不应该在 HTML 文件中。目前，如果我删除它，那么它的弹出窗口将不起作用。

Parent typescript - 问题：我想在 bindPopup 上显示 child 组件。

   L.marker([35.7392, -104.9903], {
      icon: L.mapquest.icons.marker(),
      draggable: false
    }).bindPopup(this.child.getHtmlContent()).addTo(this.map); <-- here

我的一般问题是如何实现这样的目标：

bindPopup( "<app-basicInfo [input]="testInput"></app-basicInfo>" )

Child:

<app-table style="width: 100%;" [dataSource]="dataSource" [displayedColumns]="displayedColumns">
<ng-content></ng-content>
</app-table>

Child 技术人员：

  constructor(elRef: ElementRef) {
    this.elRef = elRef;
   }
  getHtmlContent() {
    return this.elRef.nativeElement.innerHTML;
  }

我找不到答案，我已经阅读了很多文档。我什至希望能参考一些解决了类似问题的文件。

Answer 1

我在 MapQuest 的开发团队工作。您能否 post 更多代码，或者 link 到 GitHub 存储库，我可以在那里测试它？这将极大地帮助我为您尝试一些修复。

同时，试一试（参考自here）-

 L.marker([35.7392, -104.9903], {
  icon: L.mapquest.icons.marker(),
  draggable: false
}).bindPopup( "<app-basicInfo [input]="testInput"></app-basicInfo>" ).openPopup()

我确定您可能已经尝试过这个或类似的东西，只是想为您寻找一些可能简单的解决方案，直到我对代码有更多的了解。

Answer 2

基于https://github.com/Asymmetrik/ngx-leaflet/issues/178我设法解决了。

首先我安装了angular/elements。

将此添加到我的 sharedModule：

export class SharedModuleModule {
  constructor(private injector: Injector) {
    const PopupElement = createCustomElement(BasicInfoComponent, {injector});
    // Register the custom element with the browser.
    customElements.define('popup-element', PopupElement);
  }
 }

并实现了标记调用我的基本信息组件：

L.marker([35.7392, -104.9903], {
      icon: L.mapquest.icons.marker(),
      draggable: false
    }).addTo(this.map).bindPopup(fl => {
      const popupEl: NgElement & WithProperties<BasicInfoComponent> = document.createElement('popup-element') as any;
      popupEl.message="test";
      popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));
      document.body.appendChild(popupEl);
      return popupEl;
    })

angular - 打字稿中另一个组件的引用 html

angular - reference html of another component from typescript

mapquest