代码之家  ›  专栏  ›  技术社区  ›  Rafi Henig

多次调用SharedModule服务构造函数

  •  1
  • Rafi Henig  · 技术社区  · 5 年前

    我在用角度 Core/Feature/Shared 模块模式。

    什么时候? CoreComponent (应用程序的主页)呈现时 DataStorageService 的构造函数(用于 核心成分 的构造函数)被多次调用(每次调用构造函数时都会导致AJAX调用)

    请不要将我的问题标记为重复问题,因为我的问题与以前在这里提出和回答的类似问题有点不同。
    我附上了我的代码来说明我的意思(为了简单起见,我把它缩短了)。

    核心/共享模块.ts

    @NgModule({
      declarations: [...],
      imports: [...],
      exports: [... ],
    })
    export class SharedModule {
    
      static forRoot(): ModuleWithProviders {
        return {
          ngModule: SharedModule,
          providers: [XHRService, DataStorageService]
        };
      }
    }
    

    共享/服务/数据存储.service.ts

    @Injectable()
    export class DataStorageService {
      constructor(private xhr: XHRService) {
        this.loadEvents()
      }
    
      public loadOrigination = () => this.xhr.getOriginationsList().subscribe(this.originationsSource);
      public loadEvents = () => this.xhr.getEventsList().subscribe(this.eventsSource);
    
      private eventsSource = new BehaviorSubject(null);
      private originationsSource = new BehaviorSubject(null);
    
      public originations$ = this.originationsSource.asObservable();
      public events$ = this.eventsSource.asObservable();
    }
    
    

    应用模块.ts

    @NgModule({
      declarations: [...],
      imports: [
        SharedModule.forRoot(),
       ...
      ],
      providers: [...],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

    核心/核心模块.ts

    @NgModule({
      declarations:
        [
          CoreComponent,
          ...
        ],
      exports: [
        CoreComponent
      ],
      imports: [
        CoreRoutingModule,
        SharedModule
        ...
      ],
    })
    export class CoreModule { }
    
    

    核心/核心组件.ts

    @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.scss']
    })
    export class DashboardComponent implements{
    
      constructor(public dataStorageService : DataStorageService) { }
    
    }
    
    1 回复  |  直到 5 年前
        1
  •  1
  •   Sajeetharan    5 年前

    正如预期的那样,构造函数是类的默认方法,在类被实例化时执行,并确保类的所有字段都被正确初始化。当Angular构造组件树时,将调用组件的构造函数。所有生命周期挂钩都作为运行更改检测的一部分被调用。因此,每当您向任何模块注入核心组件时,都会调用它。

    解决此问题的建议是,删除 loadEvents() 在构造函数之外/在具有ngonint生命周期挂钩的组件中调用它。

     ngOnInit(){
       this.dataStorageService.loadEvents();
     }