我正在使用Angular7。我将4个组件合并为一个组件。代码如下：

<div class="page" id="kpc">
  <kt-pendingorders-clusterwise></kt-pendingorders-clusterwise>  // first component selector
  <button name="#kes" style="float: right;" type="submit" class="btn btn-sm btn-info" (click)="scrollEvent($event)">Next</button>
</div>
<div class="page" id="kes">
  <kt-expected-stock></kt-expected-stock>  // second component selector
  <button name="#kpc" type="submit" class="btn btn-sm btn-info" (click)="scrollEvent($event)">Prev</button>
  <button name="#ktp" style="float: right;" type="submit" class="btn btn-sm btn-info" (click)="scrollEvent($event)">Next</button>
</div>
<div class="page" id="ktp">
  <kt-trip-planning></kt-trip-planning>  // third component selector
  <button name="#kes" type="submit" class="btn btn-sm btn-info" (click)="scrollEvent($event)">Prev</button>
  <button name="#ktd" style="float: right;" type="submit" class="btn btn-sm btn-info" (click)="scrollEvent($event)">Next</button>
</div>
<div class="page" id="ktd">
  <kt-trip-details></kt-trip-details> // fourth component selector
  <button name="#ktp" type="submit" class="btn btn-sm btn-info" (click)="scrollEvent($event)">Prev</button>
</div>

以上代码的输出为：

在我的.TS文件中，添加了以下代码：

 scrollEvent(event) {
    event.preventDefault();
    console.log(event.currentTarget.name)
    $('html,body').stop().animate({
      scrollTop: $(event.currentTarget.name).offset().top - 75
    },1000,function () {
    });
    event.preventDefault();

  }

以上所有代码均有效，即在单击“上一个”和“下一个”之后，它会滚动到该特定的div。

现在，我想通过单击菜单来访问这些div。菜单代码如下：

//Pages.routing.module

{ path: 'OrdersSection/:Page',component: OrdersSectionComponent,canactivate: [AuthGuard],data: { roles: ['2,3'] } },{ path: 'OrdersSection1/:Page',{ path: 'OrdersSection2/:Page',{ path: 'OrdersSection3/:Page',//menu.component.ts

  { "title": "Pending orders","root": true,"icon": "flaticon-open-box","page": "OrdersSection/kpc" },{ "title": "Expected Stock","icon": "flaticon2-notepad","page": "OrdersSection1/kes" },{ "title": "Trip Planning","icon": "flaticon-app","page": "OrdersSection2/ktp" },{ "title": "Trip Details","page": "OrdersSection3/ktd" },

和我的菜单如下：

现在我有两个不同的组件，即OrderSectionComponent和MenuComponent。因此，我想从路由（即存储在Menu.component中）访问div，以便它应滚动到该特定div。

在这种情况下，我陷入了困境。有什么解决办法吗？