Angular 5.2.2组件重载致HTTP请求递增及动态加载报错求助

Hey there! Let's break down your problems step by step since you're dealing with a tricky mix of Angular 5.2.2, dynamic component loading, and ImpressPages CMS constraints.

1. Fixing the Increasing HTTP Requests Issue #

The root cause here is likely uncleaned subscriptions when switching components with *ngIf. When Angular creates a new component instance, the old one's HTTP subscriptions don't automatically cancel—they linger and pile up, leading to more requests each time you switch views.

Here are two reliable fixes:

• Use the Async Pipe: Bind your HTTP observables directly to the template. The async pipe handles subscription cleanup automatically when the component is destroyed.

  // In your component class
  pageData$ = this.http.get('/api/impresspages/content');
  

  <!-- In your component template -->
  <div *ngIf="pageData$ | async as data">
    <!-- Render content with data -->
  </div>
  

• Manual Subscription Cleanup with takeUntil: Create a "destroy" subject in each component, use it to cancel all subscriptions when the component is destroyed.

  import { Subject } from 'rxjs/Subject';
  import { takeUntil } from 'rxjs/operators';
  
  export class NewsComponent implements OnDestroy {
    private destroy$ = new Subject<void>();
  
    ngOnInit() {
      this.http.get('/api/news')
        .pipe(takeUntil(this.destroy$))
        .subscribe(news => { /* Handle news data */ });
    }
  
    ngOnDestroy() {
      this.destroy$.next();
      this.destroy$.complete();
    }
  }
  

Make sure to check for leaked subscriptions from other sources too—like route events or third-party library hooks—these can also cause request bloat.

2. Fixing Dynamic Component Loading Problems #

Problem 1: Components Piling Up with createComponent() #

When you call createComponent() repeatedly without cleaning up, Angular adds new components to the view container instead of replacing them. The fix is simple: clear the container before creating a new component.

// Before creating a new component instance
this.viewContainerRef.clear();

// Now create the new component
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TargetComponent);
this.viewContainerRef.createComponent(componentFactory);

This ensures only the latest component exists in the container.

Problem 2: Cannot set property 'viewContainerParent' of undefined with insert() #

This error usually happens when you're trying to insert a component that's not properly initialized, or your ViewContainerRef reference is invalid. Try these steps:

1. Validate Your ViewContainerRef: Make sure you're fetching it correctly with @ViewChild:

   @ViewChild('dynamicContainer', { read: ViewContainerRef }) 
   viewContainerRef: ViewContainerRef;
   

   And your template has the corresponding marker:

   <ng-template #dynamicContainer></ng-template>
   

2. Avoid Manual Component Instance Creation: Don't try to instantiate components directly—always use ComponentFactoryResolver to get a valid factory first, then create the component through the view container.
3. Check Angular Zone Context: If your code runs outside Angular's zone (e.g., in an ImpressPages callback), wrap the insert operation in ngZone.run() to ensure proper initialization:

   this.ngZone.run(() => {
     const componentRef = this.viewContainerRef.createComponent(componentFactory);
     // Or use insert if needed, but createComponent is safer
   });
   

3. Putting It All Together for ImpressPages CMS #

Since you can't modify the URL structure, you'll need a centralized solution to manage dynamic components based on API layout responses:

1. Build a Layout Service: This service will fetch the current layout from your API, track active components, and emit changes when the layout updates.
2. Create a Dynamic Loader Component: A parent component that uses the layout service to load components dynamically, following the cleanup steps above.
3. Sync with ImpressPages Events: Hook into ImpressPages' internal page change events (if available) to trigger layout refreshes without changing the URL.

Example Layout Service #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LayoutService {
  private currentLayout$ = new BehaviorSubject<any>(null);
  activeLayout$ = this.currentLayout$.asObservable();

  constructor(private http: HttpClient) {}

  fetchCurrentLayout() {
    this.http.get('/api/impresspages/current-layout')
      .subscribe(layout => this.currentLayout$.next(layout));
  }

  // Call this when ImpressPages triggers a content change
  refreshLayout() {
    this.fetchCurrentLayout();
  }
}

Example Dynamic Loader Component #

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { LayoutService } from './layout.service';
import { Subject } from 'rxjs/Subject';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-page-loader',
  template: '<ng-template #loaderContainer></ng-template>'
})
export class PageLoaderComponent implements OnDestroy {
  @ViewChild('loaderContainer', { read: ViewContainerRef }) container: ViewContainerRef;
  private destroy$ = new Subject<void>();

  constructor(
    private resolver: ComponentFactoryResolver,
    private layoutService: LayoutService
  ) {
    this.layoutService.activeLayout$
      .pipe(takeUntil(this.destroy$))
      .subscribe(layout => {
        if (!layout) return;
        
        // Clear old components first
        this.container.clear();
        
        // Load the component based on layout data
        const componentFactory = this.resolver.resolveComponentFactory(layout.component);
        const componentRef = this.container.createComponent(componentFactory);
        
        // Pass layout data to the component
        componentRef.instance.layoutData = layout.data;
      });

    // Initial layout fetch
    this.layoutService.fetchCurrentLayout();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

This setup will ensure components are properly destroyed, subscriptions are cleaned up, and dynamic loading works without errors—all while adhering to ImpressPages' URL constraints.

内容的提问来源于stack exchange，提问作者Patryk Panek