6

我正在使用angular-cli创建 Angular 2 应用程序。使用 创建应用程序后ng new NEW_PROJECTNAME，我们会得到一个index.html页面。在此页面中，他们有类似的内容。

...
<body>
 <app-root>Loading...</app-root>
 ...
</body>

不用说，这个加载信息可能看起来完全不专业。所以我的问题是如何添加更合适的东西，比如进度条或微调器？

我意识到需要发生的事情发生在 Angular 框架之外（对吗？）。我发现了一些 Angular 2 包，它们非常好用（例如Angular 2 材料或ng2-slim-loading-bar），但这些包假设我已经进入了 Angular 框架；意思是我在一些 Angular 组件中。

所以我的问题如下。

  • 是否有一个 Angular 2 钩子可用于在放入内容之前显示加载指示器<app-root></app-root>？
  • 如果我必须在 Angular 框架之外工作，最好的方法是什么？天真地，我设想我必须使用boweror安装一些包npm，在 中引用它index.html，并使用jQueryor 来显示加载指示器。我假设当 Angular 完成加载时，它会替换里面的任何东西<app-root></app-root>。我对这种方法的担忧之一是构建/打包脚本（然后我必须弄清楚如何将这个 bower/npm 包包含在我构建的应用程序中）。

任何帮助表示赞赏。

4

3 回答 3

3

最简单的方法是在应用程序准备好时将 CSS 动画放入应用程序引导组件中，内容将被替换。

请注意，应用程序将以不同的速度加载，具体取决于它是开发构建还是生产构建，因为脚本的缩小和更改检测将只运行一次，从而提供更快的加载时间。您可能需要调整动画的速度。来自应用程序的 Http 请求也可能起作用。

我从：http ://www.alessioatzeni.com/blog/css3-loading-animation/得到这个

根组件中的 CSS 和 Html：

  <app-root>

  <style>
    #content {
      width: 100%;
      /* Full Width */
      height: 1px;
      margin: 1px auto;
      background: #000;
    }

    .expand {
      width: 100%;
      height: 1px;
      margin: 1px 0;
      background: #2187e7;
      position: absolute;
      box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.7);

                 /*adjust speed here */
      -moz-animation: fullexpand 1.5s ease-out;
      -webkit-animation: fullexpand 1.5s ease-out;
    }


    /* Full Width Animation Bar */

    @-moz-keyframes fullexpand {
      0% {
        width: 0px;
      }
      100% {
        width: 100%;
      }
    }

    @-webkit-keyframes fullexpand {
      0% {
        width: 0px;
      }
      100% {
        width: 100%;
      }
      ;
    }
  </style>

    <div id="content">
      <span class="expand">Loading...</span>
    </div>


  </app-root>

第二个选项是访问bootstrap功能槽system.js并使其可用于index.html.

这是Ben Nadel的博客文章，没有如何做到这一点。

演示：在 Angular 2 RC 1 中创建预引导加载屏幕

(function( global ) {

    // .... code removed ....

    System.config({
        // .... code removed ....
    });

    // Load "./app/main.ts" (gets full path from package configuration above).
    // --
    // NOTE: We are attaching the resultant promise to the global scope so that other
    // scripts may listen for the successful loading of the application.
    global.bootstrapping = System
        .import( "app" )
        .then(
            function handleResolve() {

                console.info( "System.js successfully bootstrapped app." );

            },
            function handleReject( error ) {

                console.warn( "System.js could not bootstrap the app." );
                console.error( error );

                return( Promise.reject( error ) );

            }
        )
    ;

})( window );
于 2016-07-15T08:21:08.223 回答
0

我采用了 FontAwesome 和 Bootstrap 的简单方法：

  <app-root>
        <div class="text-center">
            <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
            <div>Something witty</div>
        </div>
    </app-root>
于 2016-11-26T01:01:51.550 回答
0

我还没有为我们的堆栈（Webpack）找到任何钩子。您可能会在每个模块的末尾附加一些任意 JavaScript 代码（如果您使用它们），这会增加一些计数器。WebPack 的加载程序 API 可以用于此。（当然，仅当您使用 WebPack 时才适用。）

在我们的项目中，使用@Kaspars 的解决方案来模拟正在加载的应用程序，即视觉上相似的页面，带有徽标、微调器和一些信息，以使用户忙于阅读它，直到应用程序加载。

于 2017-07-25T16:44:58.460 回答