Question

我正在寻找this example行的预引导加载屏幕，但是对于Angular2。

Answer 1

我可以建议一个简单的CSS方法。

首先将.loading div添加到主HTML页面中，它应该遵循主app组件元素。例如：

<my-app></my-app>

<div class="loading">
    <h1>Loading...</h1>
</div>

现在，您可以使用my-app:empty + .loading CSS选择器定位并设置启动画面样式，并在应用程序获得引导后立即消失。例如：

/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.loading {
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
my-app:empty + .loading {
    opacity: 1;
    z-index: 100;
}

如果你在关闭body标签之前放入所有重的脚本并且只为头部的加载屏幕留下必要的最小样式，这种方法会更好，所以它会尽快显示，然后脚本开始加载。

这是一个简单的演示：

演示： http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1?p=preview

Answer 2

我使用FontAwesome微调器采用了一种简单的方法（我也喜欢其他答案）：

<app-root>
    <div class="text-center">
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <div>Something witty for your userbase</div>
    </div>
</app-root>

Answer 3

为什么不尝试这种方法：

AX

Answer 4

我猜最好的方法是在加载div HTML（显示）中使用内联样式。然后在css中你有一个隐藏的类，并使用ngOnInit在加载div中包含该类。

在这种情况下，我们将首先使用html呈现样式..显示加载并且毕竟（下载css并运行js）它将具有隐藏它的类。

＆＃13;

<script type='text/javascript'>
/* <![CDATA[ */
var userSettings = {"url":"\/wordpress\/powerman\/","uid":"0","time":"1499848194","secure":""};
/* ]]> */
</script>

＆＃13;

export class AppComponent implements OnInit {
  public loaded=false;

  ngOnInit() {
    this.loaded=true;
  }
 }

＆＃13;

 .loading.loaded {
     z-index: -1;
     opacity: 0;
  }

＆＃13;

我必须取出角度视图中组件的可见性，因为它们在加载时没有任何样式加载（如没有样式的flickr）。所以在css中我隐藏并在app.html中显示

＆＃13;

<div class="loading" 

    style="opacity: 0.9;
       color: #EEE;
      position: absolute;
      top: 0;
      width: 100%;
      text-align: center;
      transition: opacity .8s ease-in-out;
      height: 100%;
      background: #fff;
      z-index: 100;
      display: table;"
      
  [class.loaded]="loaded">
  
      <md-spinner 
        style="display: table-cell;
        vertical-align: middle;"
        ></md-spinner>
        
  </div>

＆＃13;

footer, header, home-view, homebuyer-view, homeseller-view, homecommerce-view,
.mat-select-placeholder{
  visibility: hidden !important;
}

＆＃13;

Answer 5

您可以这样做：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style type="text/css">
    app-root:empty::after {
      content: 'Loading…';
      width: 100px;
      height: 100px;
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      font-size: 20px;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
<app-root></app-root>
</body>
</html>

非常简单的方法。当然，您可以使用加载程序映像替换文本。

Answer 6

在Angular项目中添加初始屏幕所需的全部都是以下步骤：

1-将此CSS代码添加到 index.html 的 head 标签中：

<style>
    .splash {
      opacity: 1;
      z-index: 1;
      visibility: visible;
      transition: opacity 1.4s ease-in-out, visibility 1.4s;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background: #1e85c8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    app-root:not(:empty) + .splash {
      opacity: 0;
      visibility: hidden;
    }
    .splash_image {
      width: 100%;
      max-width: 200px;
    }
  </style>

2-然后将以下HTML行添加到应用程序根选择器中：

  <div class="splash">
    <img class="splash_image" src="assets/images/logo.svg" alt="" />
  </div>

注意：更改 src 以获得有效的徽标路径...

这样，当Angular设置应用程序根目录的内容时，加载程序会自动消失，我认为这是Angular中启动屏幕的最佳方式。

index.html文件的

完整代码如下：

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Project Title</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <style>
    .splash {
      opacity: 1;
      z-index: 1;
      visibility: visible;
      transition: opacity 1.4s ease-in-out, visibility 1.4s;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background: #1e85c8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    app-root:not(:empty) + .splash {
      opacity: 0;
      visibility: hidden;
    }
    .splash_image {
      width: 100%;
      max-width: 200px;
    }
  </style>

</head>
<body>
<app-root>
  <div class="splash">
    <img class="splash_image" src="assets/images/logo.svg" alt="" />
  </div>
</app-root>
</body>
</html>

Angular2的Pre-Bootstrap加载屏幕

6 个答案: