Question

我具有以下结构：

<component overview>
  <child component item-info>
<component details>

在子组件item-info中，我有一些有关该项目的信息。在组件详细信息中，我动态列出了所有项目（ngb-tab-可以关闭的选项卡），可以在其中进行编辑。我想在子组件中的每个item-info上都有一个链接，如果单击此链接，则应将其滚动到组件详细信息内的选项卡。

我尝试使用模块“ ngx-scroll-to”：

该按钮将位于“子组件item-info”中：

<button [ngx-scroll-to]="'#destination'">Go to destination</button>

该div将在“组件详细信息”中：

<div id="destination" #destinationRef>
  You've reached your destination.
</div>

我也尝试过使用“ scrollIntoView”方法：

该按钮将位于“子组件item-info”中：

<button (click)="scroll(target)">
  Scroll to details
</button>
public scroll(id: any) {
    document.getElementById(id)
    element.scrollIntoView();
}

该div将在“组件详细信息”中：

不幸的是，这两种方法均无效。据我正确理解，第二种方法行不通，因为scrollIntoView和元素位于不同的模板（组件）中。我需要一种方法来使同级组件的子元素访问同级组件的html。

我当时正在考虑为细节创建一个动态[id]并将其以某种方式传递给子组件，但此刻我很茫然如何解决此问题。

编辑：感谢 @JoelJoseph ，它可以正常工作：第二种方法正在起作用！我将不胜感激任何帮助！我现在遇到的问题是，这些选项卡使用ngfor动态填充，只有在打开选项卡时ngfor才可用。但是，如果再次折叠选项卡，渲染的细节也会消失！即使选项卡处于折叠状态，是否也可以强制ngfor运行并保留html呈现？

谢谢

约翰

Angular 7从同级组件的子级滚动到动态ngb-tab

0 个答案: