一次加载重复的主服务

Question

有一个在大多数组件中使用的主数据列表。

我曾经像这样在 ngInit 中加载它。

ngOnInit() {
    this.loadMasters();
 }

loadMasters() {
    this.masterService.getOrg().subscribe(response => {
      if (response && response['result']) {
        this.organisms = response['result'];
      }
    })

    this.masterService.getCat().subscribe(response => {
      if (response && response['result']) {
        this.category = response['result'];
      }
    })
......................
}

此代码已在大多数组件中重复出现。

我需要

的标准解决方案

1) 避免在所有组件中调用这些 master，这会消耗不必要的服务器 calls.I 对此最好有一个解决方案。 2）有没有办法缓存这个。如果上面没有解决办法就试试这个。

Answer 1

在您的 masterService 中，您可以创建两个 BehaviorSubject，例如：

categories$ = new BehaviorSubject<any>(null);
organizations$ = new BehaviorSubject<any>(null);

然后使用条件填充它们以避免多次调用。将 loadMasters 移动到服务内部，例如：

mastersService.ts

loadMasters() {
    // check for value in org before doing request
    if (!this.organizations$.value) {
         this.masterService.getOrg().subscribe(response => {
            if (response && response['result']) {
              // set value into behavior subject
              this.organizations$.next(response['result']);
            }
         })
    }

    // do the same for the categories
    if (!this.categories$.value) {
         this.masterService.getCat().subscribe(response => {
              if (response && response['result']) {
                  // set value into behavior subject
                  this.categories$.next(response['result']);
              }
         })
    }
...
}

然后在所有需要消费值的地方，订阅行为主体，在这之前调用loadMaster确保数据已经加载：

mycomponent.ts:

public ngOnInit(): void {
    this.mastersService.loadMasters(); // load data if not loaded yet
    // consume the data from the behavior subjects
    this.mastersService.categories$.subscribe(value => {
       console.log(value);
    });
    this.mastersService.organizations$.subscribe(value => {
       console.log(value);
    });

}

Answer 2

const routes: Routes = [
  {
    path: 'master',
    component: MasterInfoComponent,
    resolve: {
      org: OrgResolverService,
      cat: CatResolverService,
    },
    children: [
    { 
        path: 'child1',
        component: child1Component,
    }
   ]
  },
];

在所有的子组件中你都可以获得这样的数据

ngOnInit() {
   this.route.parent.data.subscribe(data => {
       this.cat= data.cat;
       this.org= data.org;
    });
}

一次加载重复的主服务

Loading repeated master service at once

angular

angular6

angular7

angular8