Question

我正在为Angular（5）开发一个加载程序组件。加载程序组件位于不同的子组件中，这些子组件本身位于整个父组件中。

因此，例如，父组件在视图中有两个组件：

<app-abc></app-abc>
<app-xyz></app-xyz>

每个组件调用一个不同的端点，而该端点被调用，我想显示一个加载动画，但它需要对调用它的组件是唯一的。我可以在每个触发加载器的组件中重复代码，但我宁愿创建一个可以在整个应用程序中共享的加载组件。

此加载组件具有布尔showLoading变量，该变量通过在加载程序组件中调用setShowLoading方法来设置。

this.loadingService.setShowLoading(true);

加载程序组件视图有一个* ngIf，用于显示或不显示加载动画，基于布尔变量类型的值。

只需一个加载器组件，一切都很好，但只要两个组件在页面上都有这个加载器组件，就会调用它们。

我一直在考虑传递一个ID参数，但我不相信这会解决问题或保持高效。

我认为因为加载程序组件在两个不同的组件中，所以它的范围将被封装。事实证明它不是。

是否有一种简单的方法可以确保此加载程序组件在其父组件视图中是唯一的？

Answer 1

事实证明解决方案非常简单。

@Component({
   selector: 'component-abc',
   templateUrl: './component-abc.component.html',
   providers: [ LoadingComponent ]
})

使用Loading服务的组件需要将其声明为提供者，以便使该服务成为该组件的单例。

来自：