如何根据父元素宽度设置ngx-infinite-scroll的[horizontal]值？赋值不生效

原因分析 #

infinite scroll指令的初始化逻辑早于ngAfterViewInit钩子执行，导致它读取horizontal变量时，该值还未被赋值，因此始终解析为默认的假值。

解决方案 #

1. 提前在ngOnInit中获取父元素宽度 #

如果父元素宽度在组件初始化阶段就能确定，直接在ngOnInit里赋值，避免延迟：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  horizontal = false;
  @ViewChild('parentContainer') parentContainer!: ElementRef;

  ngOnInit(): void {
    const parentWidth = this.parentContainer.nativeElement.offsetWidth;
    // 替换成你的宽度判断逻辑
    this.horizontal = parentWidth > 768;
  }
}

2. 手动触发指令更新 #

如果必须在ngAfterViewInit中获取宽度，给指令加模板引用，赋值后手动通知它更新：

• 模板中添加指令引用：

<div infiniteScroll #scrollDirective="infiniteScroll" [horizontal]="horizontal">
  <!-- 滚动内容区域 -->
</div>

• 组件中调用指令的更新方法（以ngx-infinite-scroll为例）：

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  horizontal = false;
  @ViewChild('parentContainer') parentContainer!: ElementRef;
  @ViewChild('scrollDirective') scrollDirective!: InfiniteScrollDirective;

  ngAfterViewInit(): void {
    const parentWidth = this.parentContainer.nativeElement.offsetWidth;
    this.horizontal = parentWidth > 768;
    
    // 手动触发指令的变更检测逻辑
    this.scrollDirective.ngOnChanges({
      horizontal: {
        currentValue: this.horizontal,
        previousValue: !this.horizontal,
        firstChange: false,
        isFirstChange: () => false
      }
    });
  }
}

3. 用ChangeDetectorRef强制更新视图 #

如果赋值后视图没同步，强制触发变更检测让指令读取最新值：

import { Component, AfterViewInit, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  horizontal = false;
  @ViewChild('parentContainer') parentContainer!: ElementRef;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    const parentWidth = this.parentContainer.nativeElement.offsetWidth;
    this.horizontal = parentWidth > 768;
    // 强制触发变更检测
    this.cdr.detectChanges();
  }
}

内容的提问来源于stack exchange，提问作者Benjamin McFerren