Html 仅为角度视图中的特定组件调用后端

我的项目中有标记组件，我在其他组件中重用了该组件。在我的标签组件ngOnInit中，我调用后端来获取所有现有的标签。我现在遇到的问题是，调用应用于所有其他组件，即使除了编辑组件之外的其他组件不需要调用。因为我只需要后端调用来显示编辑组件的现有标记，所以我尝试将该调用移动到编辑组件，但它不再显示现有标记。如果我能得到任何关于如何解决这个问题的帮助或建议，我将不胜感激

标签组件TS

  ngOnInit(): void {
    this.tagService.getAllTagsByType('user').subscribe((normalTags) => {
      this.loading = true;
      if (normalTags)
        this.allnormalTags = normalTags;
      this.allnormalTags.forEach(normalTags => {
        this.allTagNames.push(normalTags.tag);
      });
      this.loading = false;

    })
  }

如果我添加这个callintags组件，它会在下拉列表中显示所有现有的标记。我试图将其移动到编辑组件ngOnIt，因为我只希望Eidt组件使用该调用，但它不再显示现有标记

Tags.Service.ts

  getAllTagsByType(tagType: any){
    return this.http.get<Tag[]>(`${environment.api.chart}/tags/all/${tagType}`).pipe(first());
  }

getAllTagsByType（标记类型：任意）{
返回这个.http.get（`${environment.api.chart}/tags/all/${tagType}'）.pipe（first（））；
}

您可以尝试使用设置一个标志来触发后端调用

tags.component.ts

从'@angular/core'导入{Component，OnInit，Input}；
导出类TagsComponent实现OnInit{
@Input（）getAllTags=false；
ngOnInit（）：void{
如果（this.getAllTags）{//{
这是。加载=真；
如果（正常标记）
this.allnormalTags=normalTags；
this.allnormalTags.forEach（normalTags=>{
this.allTagNames.push（normalTags.tag）；
});
这一点：加载=错误；
},
错误=>{
//处理错误
}
);
}
}
}

现在，当您希望进行后端调用时，将值

true

传递给

getAllTags

。由于

ngOnChanges

钩子是在

ngOnInit

之前触发的，因此如果未在组件选择器中传递属性，则不会进行调用

---

尝试使用RxJS。您应该将标记数据作为主题（可观察）保存在TagService中。顺便说一句，在服务层存储数据始终是最佳实践

标签服务：

@Injectable({
  providedIn: 'root'
})
export class TagService {

  tagsSource = new BehaviorSubject<Tag[]>(null);
  allnormalTags$ = this.tagsSource.asObservable();

  getAllTagsByType(type: string){
   http.request.subscribe(resultData => this.tagsSource.next(resultData))
   }

}

另外，您不需要明确订阅组件中可观察到的服务。相反，您可以使用异步管道直接从服务主体/可观察对象获取数据

<table *ngIf="tagService.allnormalTags$ | async as allnormalTags">
 <tbody>
        <tr class="product-list-item" *ngFor="let tag of allnormalTags">
          <td data-label="name"> {{tag.name}} </td>

{{tag.name}

什么是标签服务？还有，TagsService是一个API调用。嗨，Michael，谢谢。所以在我的编辑组件中，我像这样导入我的标记组件，这样我就可以在其中添加getAllTags=“true”？在其他组件中，我像这样导入它，这样就有多个其他输入，只需添加

[getAllTags]=“true”

，以及其他输入。我已经编辑了答案。很有效。非常感谢你的帮助，迈克尔。我真的很感激。

<table *ngIf="tagService.allnormalTags$ | async as allnormalTags">
 <tbody>
        <tr class="product-list-item" *ngFor="let tag of allnormalTags">
          <td data-label="name"> {{tag.name}} </td>