基于Angular 4+Ruby on Rails的社交APP滚动加载实现求助

Hey Rahul, great to help you build that scroll-loading feature for your Angular 4 + Rails social app! Let's break this down into actionable steps, starting with backend adjustments and moving to the frontend implementation.

First, you’ll need to modify your Rails endpoint to return paginated posts instead of all posts at once. This ensures you only fetch the data you need, keeping performance snappy. Here’s how to update your controller:

# app/controllers/posts_controller.rb
def all_posts
  token = params[:user_token]
  # Validate token and fetch associated user (adjust this to match your auth logic)
  user = User.find_by(auth_token: token)

  if user
    # Fetch posts ordered by newest first
    last_created_at = params[:last_created_at]
    limit = params[:limit] || 5

    posts = if last_created_at.present?
              # Get posts older than the last displayed post
              user.posts.where("created_at < ?", last_created_at)
                .order(created_at: :desc)
                .limit(limit)
            else
              # First load: fetch latest 15 posts
              user.posts.order(created_at: :desc).limit(15)
            end

    render json: { posts: posts }
  else
    render json: { error: "Invalid authentication token" }, status: :unauthorized
  end
end

Next, let’s refactor your Angular component to handle incremental loading, scroll detection, and the "shift" behavior (remove top 5 posts when adding 5 older ones at the bottom).

2.1 Add Core State Variables #

First, add these variables to your component to track state and boundaries:

displayPosts: any[] = [];
formPostCollection: FormGroup[] = [];
loading = false;
private lastPostCreatedAt: string | null = null;
private readonly INITIAL_LOAD_COUNT = 15;
private readonly LOAD_MORE_COUNT = 5;

2.2 Refactor Initial Post Loading #

Update your initial load logic to fetch the first 15 posts and set up necessary state:

ngOnInit() {
  this.loadInitialPosts();
  // Set up scroll listener (we'll refine this later with debouncing)
  fromEvent(window, 'scroll').pipe(debounceTime(300)).subscribe(() => this.onScroll());
}

ngOnDestroy() {
  // Clean up scroll listener to prevent memory leaks
  fromEvent(window, 'scroll').unsubscribe();
}

loadInitialPosts() {
  this.loading = true;
  this.postservice.doAllPost(this.globalService.user_token, this.INITIAL_LOAD_COUNT)
    .subscribe(
      (response: any) => {
        this.zone.run(() => {
          this.displayPosts = response.posts;
          this.updateFormPostCollection();
          // Track the oldest post's timestamp for future requests
          if (this.displayPosts.length > 0) {
            this.lastPostCreatedAt = this.displayPosts[this.displayPosts.length - 1].created_at;
          }
          this.loading = false;
        });
      },
      (error) => {
        this.zone.run(() => {
          this.loading = false;
          console.error('Failed to load initial posts:', error);
        });
      }
    );
}

// Helper to refresh your form control collection when posts change
updateFormPostCollection() {
  this.formPostCollection = [];
  for (const post of this.displayPosts) {
    const formGroup = this.fb.group({
      post_text: new FormControl(post.post_text, Validators.required),
      id: new FormControl(post.id)
    });
    this.formPostCollection.push(formGroup);
  }
}

2.3 Update Your Post Service #

Modify your doAllPost service method to accept pagination parameters:

// posts.service.ts
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

doAllPost(userToken: string, limit: number, lastCreatedAt?: string): Observable<any> {
  let params = new HttpParams()
    .set('user_token', userToken)
    .set('limit', limit.toString());

  if (lastCreatedAt) {
    params = params.set('last_created_at', lastCreatedAt);
  }

  return this.http.get('/api/posts/all_posts', { params });
}

2.4 Implement Scroll Detection & Load More #

Add logic to detect when the user scrolls to the bottom, then fetch older posts and update the displayed list:

onScroll() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = document.documentElement.clientHeight;

  // Trigger load more when user is 100px from the bottom, and not already loading
  if (scrollTop + clientHeight >= scrollHeight - 100 && !this.loading && this.lastPostCreatedAt) {
    this.loadMorePosts();
  }
}

loadMorePosts() {
  this.loading = true;
  this.postservice.doAllPost(this.globalService.user_token, this.LOAD_MORE_COUNT, this.lastPostCreatedAt)
    .subscribe(
      (response: any) => {
        this.zone.run(() => {
          const newPosts = response.posts;
          if (newPosts.length > 0) {
            // Remove top 5 posts, add 5 older posts at the bottom
            this.displayPosts = this.displayPosts.slice(5).concat(newPosts);
            // Update the oldest post timestamp
            this.lastPostCreatedAt = this.displayPosts[this.displayPosts.length - 1].created_at;
            this.updateFormPostCollection();
          }
          this.loading = false;
        });
      },
      (error) => {
        this.zone.run(() => {
          this.loading = false;
          console.error('Failed to load more posts:', error);
        });
      }
    );
}

• Debounce Scroll Events: We added debounceTime(300) to the scroll listener to avoid excessive API calls when the user scrolls quickly.
• No More Posts Handling: Add a check in loadMorePosts to disable loading if the backend returns an empty array (no older posts left).
• Loading UI: Add a simple loading indicator at the bottom of your post list:

  <div *ngIf="loading" class="loading-indicator">Loading older posts...</div>
  

• Zone Awareness: You’re already using NgZone.run() to ensure Angular detects changes correctly when scroll events fire outside its zone—nice touch!

内容的提问来源于stack exchange，提问作者Rahul Wadhwa