Angular5：在加载页面之前加载微调器

Question

有没有加载加载微调器的方法

[`https://plnkr.co/edit/yhA0AwY9gzd0JsxhDouz?p=preview`][1]

而不是在事件（单击）上，而是在应用程序加载时在开始加载页面上，我知道加载模块的 bcs 指令很棘手，不能在应用程序之前加载，但如果有人这样做，可能会以其他方式加载。谢谢。

Answer 1

您是否尝试过将微调器放在应用程序标签之间的服务器端 HTML 页面（即 index.hbs 或您正在使用的任何模板引擎）？

例如：

<my-app> 
  spinner code
</my-app>

加载时会显示。

Answer 2

我只使用 CSS 制作了 this plunkr。

对于您的情况，您将无法执行此操作，因为它是一个 Angular 组件。您需要加载您的应用程序才能使用您的组件！

您只需更改我的 CSS（和 HTML）代码以满足您的需要。

玩得开心！

//Mandatory plunkr code

Answer 3

如果您查看 -> http://akveo.com/ngx-admin/ ，您可以看到您正在寻找的效果。

他们实现它的方法是将下面的代码 <my-app> Loading... </myapp> 放在 index.html 文件中。

这是他们回购的 link -> 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>

Angular5：在加载页面之前加载微调器

Angular5: loading spinner before load page

javascript

angular

angular5