Question

我的index.html文件包含以下内容：

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script defer src="main.dart" type="application/dart"></script>
    <script defer src="packages/browser/dart.js"></script>
  </head>

  <body>
    <div id="loader-wrapper"></div>
    <my-app></my-app>
  </body>
</html>

我希望在加载loader-wrapper时淡出div my-app。

最初我考虑绑定OnInit类中的my-app方法，然后访问my-app元素之外的DOM以淡出loader-wrapper div 。这不是一个好的解决方案，因为我认为my-app类中的代码只应该操纵my-app元素中的DOM。

my-app元素使用上面index.html文件中放置的JavaScript片段来触发我可以绑定的任何类型的事件吗？

Answer 1

如果my-app的内容为空，我使用css显示内容，然后在应用加载时隐藏它。

.loader-wrapper {
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

my-app:empty + .loader-wrapper {
    text-align: center;
    padding-top: 15%;
    opacity: 1;
    z-index: 100;
}

在我的应用程序空样式中设置加载器包装器的样式但是您希望在加载应用程序时显示它，并以相同的方式创建其他样式（例如，为您设置h2标签样式装载机，你会这样做：

my-app:empty + . loader-wrapper h2 {
    color: #EEE;
    padding-top: 20px;
    font-size: 1.5em;
}

应用程序加载后，内容会加载到my-app div中，因此它不再为空，并且.loader-wrapper样式淡出。

 < my-app ></my-app >

 <div class="loader-wrapper">
      <h2>Loading</h2>
      <span class="loginCopyright">&copy; Your Ace from Outer Space</span>
 </div>

如何在加载Angular Dart应用程序时淡出加载程序？

1 个答案: