Agm方向面板：显示不同组件中的面板

Question

我在一个页面上显示两个组件（第一个是页面的70％，另一个是30％）。一个在地图上，另一个在我要显示面板的位置（有关如何到达目的地的信息：向左转，然后向右转，等等）

我使用了agm指令来获取面板-https://robby570.tw/Agm-Direction-Docs/source/featured/direction.html（请参阅使用新查询更新面板）。

我设法很好地创建了它，当您单击一个按钮时，该面板将显示文字，但在地图组件上，在地图下方（参见图2）。这是因为我将<div #myPanel></div>放在了地图的第一部分。

我想在第二个组件上获取该面板文本。我不知道该怎么做，因为根据上述文档，我将面板绑定在地图组件[panel]="myPanel"中。

那么有什么方法可以将绑定的数据传输到其他组件中？

这是第一个html组件：​​

<agm-map [zoom]="zoom" [latitude]="lat" [longitude]="lng">
    ...

    <agm-direction
      [origin]="origin" 
      [destination]="destination" 
      [travelMode]="transitOptions" 
      [visible]="show"
      [renderOptions]="renderOptions"
      [markerOptions]="markerOptions"
      [panel]="myPanel" <!-- THIS IS IMPORTANT FOR INFO -->
    >
    </agm-direction>

    ...    
</agm-map>

<div #myPanel></div>

第二个组件只是一些通用的html。

TLDR：在agm方向上绑定<div #myPanel></div>时，如何使[panel]="myPanel"在不同的组件中工作。

Answer 1

设法获得价值

@ViewChild("myPanel", {static: false}) myPanel;

然后，在单击按钮时激活的功能中：

let _this = this;
setTimeout(function() {
  console.log(_this.myPanel);
  if(_this.myPanel != undefined){
    let ivan = _this.myPanel;
    console.log("test myPath", ivan);
    //console.log("Test", JSON.stringify(this.myPanel.nativeElement.innerHTML));
    console.log(_this.myPanel.nativeElement.innerHTML); //THIS IS THE ANSWER
  }
}, 500);