如何在Angular中使用骨架加载器?
骨架装载机在过去几年里已经变得相当流行。这种加载器的目的是显示内容加载的占位符。
通常，骨架加载器显示一个反映整个视图结构和外观的灰色模板。它给出了每个块中加载的内容类型的概念，如图像、文本等。
虽然我们可以用HTML/CSS实现这样的加载器，但有趣的是，Angular等框架也有开源现成的骨架加载器。我们可以用最少的努力使用它们。
进入ngx-skeleton-loader
ngx-skeleton-loader是目前npm中Angular最流行的框架加载器模块。
要使用那个库，用npm把它安装到你的项目中:
NPM安装ngx-skeleton-loader
然后你需要在你的应用模块中添加NgxSkeletonLoaderModule作为依赖:
从'ngx-skeleton-loader'导入{ngxskeleton - loadermodule};
.．.@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．
