如何在Angular中使用骨架加载器?
在过去的几年里，骨架装载机已经变得非常流行。这样的加载器的目的是显示内容加载的位置。
通常，骨架加载器显示一个灰色模板，反映整个视图的结构和外观。它给出了每个块中加载的内容类型的概念，例如图像、文本等。
虽然我们可以用HTML/CSS实现这样的加载器，但有趣的是，像Angular这样的框架有现成的开源骨架加载器。我们可以用最少的努力来使用它们。
进入ngx-skeleton-loader
ngx-skeleton-loader是目前npm中最流行的Angular骨架加载器模块。
要使用这个库，请使用npm将它安装到你的项目中:
NPM安装ngx-skeleton-loader
然后你需要在你的应用模块中添加ngxskeletal loadermodule作为一个依赖:
import {ngx-skeleton-loader};
.．.@NgModule ({
声明:[
.．.
),
进口:[
.．.
NgxSkeletonLoaderModule，
.．.
),
.．.
})
导出类AppModule {}
就是这样!现在可以在代码中使用骨架加载器组件。在这个例子中，我们将显示一个圆作为骨架加载器:
<ngx-skeleton-loader数= "1"外观= "圆" > < / ngx-skeleton-loader >
其思想是在数据加载时显示骨架组件，我们可以使用简单的ngIf该组件的指令:
< ngx-skeleton-loader* ngIf =”!contentLoaded”外观= "圆" >
哪些渲染选项可用?
与ngx-skeleton装载机，有两种外观可供选择:圆或行．
这些组件也支持不同的动画:进步(默认值)，progress-dark,脉冲．
下面是一个显示块的示例2行使用脉冲动画：
行“动画= "脉冲" > < / ngx-skeleton-loader > 上面的代码将导致这个骨架加载器:
这是一个Stackblitz例子这说明了所有不同的形状和动画的可能组合:
如何完全定制骨架加载器?
可以使用自定义CSS更改框架加载器的所有方面。的主题输入值可用于将此类定制传递给框架加载器。
例如，下面是一个快速更改线骨架加载器的边界半径、颜色和高度的示例:
< ngx-skeleton-loader
数= " 2 "
外观= "线"
动画=“进步”
(主题)= " {
“背景颜色”:“# FFBF00”,
高度:“30 px”,
“border - radius”:0
}”
>
< / ngx-skeleton-loader >
导致:
有关更多信息和主题选项，您可以查看官方文档:https://www.npmjs.com/package/ngx-skeleton-loader
一些更多的例子可在此查阅:https://stackblitz.com/edit/ngx-skeleton-loader-sample?file=app%2Fapp.component.html．
我叫betway必威滚球．我是Angular的谷歌开发专家，也是角训练在那里我帮助web开发团队学习并熟悉Angular。
如果您在网页开发方面需要任何帮助，请随时与我们联系!
如果你喜欢这篇文章，请鼓掌或分享。你的帮助我永远感激。你也可以点击此处订阅Medium．
