页面上有多个不同的组件，每个组件使用相同的加载器组件 - 如何使它们独一无二？

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服务的组件需要将其声明为提供程序，以便使该服务仅为该组件的单例。

来自：