以下是一个使用AGM方向面板，在不同的组件中显示面板的解决方法的代码示例：

首先，安装AGM库：

npm install @agm/core

然后，在你的Angular组件中引入AGM库：

import { Component, OnInit } from '@angular/core';
import { AgmMap } from '@agm/core';

@Component({
  selector: 'app-direction-panel',
  templateUrl: './direction-panel.component.html',
  styleUrls: ['./direction-panel.component.css']
})
export class DirectionPanelComponent implements OnInit {
  // 定义起始点和目的地的坐标
  origin = { lat: 51.678418, lng: 7.809007 };
  destination = { lat: 52.520008, lng: 13.404954 };
  // 定义地图显示的缩放级别
  zoom = 10;

  constructor() { }

  ngOnInit() {
  }
}

在你的HTML模板文件中，使用AGM指令显示地图和面板：

在上面的示例中，我们使用AgmMap指令显示地图，并使用AgmDirection指令显示方向面板。origin和destination属性定义起始点和目的地的坐标。renderOptions属性可以用来配置渲染选项，例如禁用起点和终点的标记。panel属性将面板绑定到HTML模板中的