Angular 6 Scroll Listener 重新加载组件

Question

为了尽可能简单地说明这一点，这是我的场景。

1) 我的父组件有一个 ViewContainerRef动态加载父组件中的组件。对于我的用例，父级是一个空的持有者页面，它根据一组变量动态地将自己替换为另一个页面。

<ng-template #dynamic></ng-template>

2) 子组件有一个水平滚动的 div，看起来类似于以下内容:

<div id="carousel" (scroll)="onScroll($event)"> <!-- List of components --> </div>

任何时候用 (scroll) 滚动listener，它会重新加载父组件，因此滚动位置总是弹回 0，因为它已重新加载。

但是，如果我删除 (scroll)听众 div 滚动没有问题。问题是，我想根据水平滚动位置动态更改页面上的项目。

有人对嵌入式组件和滚动监听器可能出现的问题有任何想法吗？将不胜感激!

Answer 1

我怀疑 onScroll 正在触发 Angular 的变化检测器(如评论所建议的那样)，它出于某种原因决定页面脏了——这会触发页面的重绘。如果是这样，我怀疑重绘会重置轮播 div。

要证实这种怀疑，您可以更改有问题的组件上的 ChangeDetectionStrategy。 ChangeDetectionStrategy.OnPush 只会在绑定(bind)到 @Input() 的数据(如下面的 data)发生变化时或如果你也明确告诉它。

@Component({
  selector: 'app-neat',
  templateUrl: './neat.component.html',
  // Add this line to your component
  changeDetection: ChangeDetectionStrategy.OnPush 
})
export class NeatComponent {
  @Input() data: string[];
}

这意味着当您确实希望重绘组件时，您需要明确告诉 Angular 这样做。你可以这样做:

@Component({
  selector: 'app-neat',
  templateUrl: './neat.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() data: string[];

  // Inject the ChangeDetectorRef into your component
  constructor(private cd: ChangeDetectorRef) {}

  refresh() {
    // Manually tell Angular to detect changes and redraw the screen
    this.cd.detectChanges();
  }
}

您可以在此处找到更多信息:https://alligator.io/angular/change-detection-strategy/

这应该允许您对触发滚动事件时页面上重绘的内容进行细粒度控制。

如果您发布更多代码，我们可能会提供更具体的答案。