我正在使用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组件中。
所以我的问题如下。
<app-root></app-root>？bower或安装一些软件包npm，在中引用该软件包index.html，并使用jQuery或某种东西来显示加载指示符。我假设到Angular完成加载时，它将替换里面的任何东西<app-root></app-root>。我对这种方法的关注之一是构建/打包脚本（然后，我必须弄清楚如何在我构建的应用程序中包含这个bower / npm软件包）。任何帮助表示赞赏。
最简单的方法是在应用程序准备就绪后，将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的博客文章no如何做到这一点。
演示：在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 );
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句