关于Angular 2应用程序加载时该怎么做的一些问题

Question

关于Angular 2应用程序加载时该怎么做的一些问题

Jan*_*yne 6 jquery angular-cli angular-material2 angular

我正在使用它angular-cli来创建一个Angular 2应用程序.创建应用程序后ng new NEW_PROJECTNAME,我们得到一个index.html页面.在这个页面中他们有这样的东西.

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

Run Code Online (Sandbox Code Playgroud)

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

我意识到需要发生的事情发生在Angular框架之外(对吧？).我找到了一些非常好用的Angular 2软件包(例如Angular 2材料或ng2-slim-loading-bar),但这些软件包假设我已经进入了Angular框架; 意思是我在一些Angular组件里面.

所以我的问题如下.

是否有一个Angular 2钩子,我可以用它来显示内容放入之前的加载指示器<app-root></app-root>？
如果我必须在Angular框架之外工作,那么最好的方法是什么？天真的,我想我必须安装一些包bower或者npm,引用它index.html,并使用jQuery或显示加载指示器的东西.我假设当Angular完成加载时,它将替换内部的任何东西<app-root></app-root>.我的一个担心这种做法是建筑/包装脚本(然后我必须弄清楚如何将这个亭子/ NPM包我构建的应用程序).

任何帮助表示赞赏.

Answer 1

KB_*_*KB_ 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>

Run Code Online (Sandbox Code Playgroud)

第二个选项是访问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 );

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，1 月前
查看次数：	811 次
最近记录：	8 年，1 月前