实施维护逻辑 - 如何限制 Angular 中的进一步 API 调用答案

【问题标题】：Implement maintenance logic - how to restrict further API calls in angular实施维护逻辑 - 如何限制 Angular 中的进一步 API 调用
【发布时间】：2022-10-13 18:17:22
【问题描述】：

我们正在使用 Angular 9 应用程序，我们有多个组件。一些组件以父子关系连接，而其他组件是独立的。我们正在进行一个初始 API 调用，它将根据我们需要进一步执行的值返回标志值 true/false。即如果它是“真的”，我们需要进一步调用或停止执行。

homecomponent.html :

<div>
//header is child component
<app-header>

       </app-header>
.......
......
</div>


homecomponent.ts:

export class HomeComponent implements OnInit {

ngOnInit(): void {
this.getPageConent();
}

getPageConent() {
// below service will make the http call

    this.dataService.GetPovertyPageStaticContent('home').subscribe((result: any) => {
// based upon the flag execute further or stop execution
 });
  }
}


headercomponent.ts:

export class HeaderComponent implements OnInit {

ngOnInit(): void {
 this.getContents();
}
 getContents() {
  // Another API call to get page data
    this.dataService.GetPovertyPageStaticContent('pageheader').subscribe((result: any) => {

     //do some operation
    });
  }
}

像这样，我们有多个组件相互连接。我们希望根据初始 API 调用值限制应用程序中的其他 API 调用。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

这样就够了吗？

this.dataService
  .GetPovertyPageStaticContent('home')
  .pipe(filter(v => !!v))
  .subscribe(...)

如果结果为假，这将阻止订阅执行。

【讨论】：