我正在使用 angular-cli创建 Angular 2 应用程序。使用 ng new NEW_PROJECTNAME 创建应用程序后，我们得到一个 index.html页。在这个页面中，他们有这样的东西。
...
<body>
<app-root>Loading...</app-root>
...
</body>
不用说，此加载消息可能看起来完全不专业。所以我的问题是如何添加更合适的东西，例如进度条或微调器？
我意识到需要发生的事情发生在 Angular 框架之外(对吗？)。我发现了一些非常好用的 Angular 2 包(例如 Angular 2 material 或 ng2-slim-loading-bar )，但这些包假设我已经进入了 Angular 框架；这意味着我在某个 Angular 组件中。
所以我的问题如下。
- 在将内容放入
<app-root></app-root>之前，是否有 Angular 2 Hook 可用于显示加载指示器？ - 如果我必须在 Angular 框架之外工作，最好的方法是什么？天真地，我设想我必须安装一些带有
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>
第二个选项是通过 system.js 访问 bootstrap 功能，并使其可用于 index.html 中的脚本标签。
这是 Ben Nadel 的博文没有如何做到这一点。
演示:Creating A Pre-Bootstrap Loading Screen In 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 );
关于jquery - 关于在加载 Angular 2 应用程序时要做什么的一些问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38387120/