Question

我使用goular官方material design实施Angular。在tabs component内，我有一些内容，需要跟踪标签内容的滚动位置。

实际滚动的div是由角度材质自动生成的，因此我无法在HTML模板中添加滚动处理程序。

模板：

<md-tab-group>
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

输出（缩短）：

<md-tab-group class="mat-tab-group">
  <md-tab-header class="mat-tab-header">
    <div class="mat-tab-list">
      <div class="mat-tab-labels">Tab 1</div>
      <div class="mat-tab-labels">Tab 2</div>
    </div>
  </md-tab-header>
  <div class="mat-tab-body-wrapper">
    <md-tab-body class="mat-tab-body">
      <div class="mat-tab-body-content">
        Content 1
      </div>
    </md-tab-body>
    <md-tab-body class="mat-tab-body">
      <div class="mat-tab-body-content">
        Content 2
      </div>
    </md-tab-body>
  </div>
</md-tab-group>

滚动发生在 .mat-tab-body-content -elements中，我无法从模板访问。有关如何跟踪滚动的想法吗？

Answer 1

好的我解决了这个问题，你可以获得组件的nativeElement并使用javascripts querySelector() - function：this.elementRef.nativeElement.querySelector('.mat-tab-body-content')

跟踪Angular中外部组件内部的滚动

1 个答案: