Angular5：在加载页面之前加载微调器
[英]Angular5: loading spinner before load page
问题描述
Is there way to load loading spinner 
有没有办法加载加载微调器
[`https://plnkr.co/edit/yhA0AwY9gzd0JsxhDouz?p=preview`][1]
and not on event (click) but on start loading page while application loading, i know that is tricky bcs directive of loading module can't be load before application, but if someone do it maybe in some other way. 而不是在事件（点击），但在应用程序加载时开始加载页面，我知道加载模块的棘手的bcs指令不能在应用程序之前加载，但如果有人这样做可能以其他方式。 Thank you. 谢谢。
3 个解决方案
解决方案1
2 2018-01-17 14:46:38
Have you tried putting your spinner in the HTML page on the server side (ie index.hbs or whatever templating engine you're using) between your app tags? 您是否尝试将微调器放在服务器端的HTML页面（即index.hbs或您正在使用的任何模板引擎）之间？
Eg: 例如：
<my-app>
spinner code
</my-app>
It will show it while loading. 它会在加载时显示它。
解决方案2
1 已采纳 2018-01-17 14:54:24
If you look at -> http://akveo.com/ngx-admin/ , you can see the effect you're looking for. 如果你看 - > http://akveo.com/ngx-admin/ ，你可以看到你正在寻找的效果。
The way they achieved it is by putting the code bellow <my-app> Loading... </myapp> in the index.html file. 他们实现它的方法是将代码放在index.html文件中的<my-app> Loading... </myapp> 。
Here is the link to their repo -> https://github.com/akveo/ngx-admin , and the body part of index.html you're looking for looks like: 这是他们的回购链接 - > https://github.com/akveo/ngx-admin ，你正在寻找的index.html的正文部分如下所示：
<body>
<ngx-app>Loading...</ngx-app>
<style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1003;background: #000000;overflow:hidden} .spinner div:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(255,56,106,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite} .spinner div:first-child:after,.spinner div:first-child:before{content:'';position:absolute;border-radius:50%} .spinner div:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(255, 228, 32);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite} .spinner div:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(61, 175, 255,1);animation:spin 1.5s linear infinite}</style>
<div id="nb-global-spinner" class="spinner">
<div class="blob blob-0"></div>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="blob blob-4"></div>
<div class="blob blob-5"></div>
</div>
</body>
解决方案3
0 2018-01-17 14:52:18
I made this plunkr using only CSS. 我只使用CSS制作了这个plunkr 。
In your case, you won't be able to do this, since it is an Angular component. 在您的情况下，您将无法执行此操作，因为它是一个Angular组件。 You need your application to be loaded to use your components ! 您需要加载您的应用程序才能使用您的组件！
What you can do is simply change my CSS (and HTML) code to suit your needs. 您可以做的只是更改我的CSS（和HTML）代码以满足您的需求。
Have fun ! 玩得开心 ！
//Mandatory plunkr code
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.