Question

在我的Angular应用程序中，我的菜单组件html代码在页面加载时会短暂显示。即使我使用display none css隐藏菜单html根元素，当页面开始加载时仍会显示html。我已经阅读了很多关于ng-cloak（https://docs.angularjs.org/api/ng/directive/ngCloak）的内容，但似乎Angular 4没有ngCloak。

所以我不知道如何防止这种不愉快的影响。

Angular 4是否有针对ng-cloak的等效指令？如何正确显示页面而不显示加载时没有样式的HTML？

Answer 1

index.html文件不应包含任何特定于应用程序的HTML代码。但只是一些标题和应用程序的根标记。它可能包含一个占位符文本，如“根目录”中的“正在加载”。

应用程序的所有html代码都应该在app.component.html和/或其他组件中。

@ angular / cli生成一个index.html“template”文件，如下所示：

<!doctype html>
<html>
    <head>
        ...
    </head>
    <body>
       <app-root>Loading...</app-root>
    </body>
</html>

浏览器立即显示“正在加载...”文本。在Angular初始化之后，它将被实际应用程序替换。要获得白页，只需删除文本。

Answer 2

我会选择@HendrikBrummermann的答案：放置一个“Loading ...”标签。

从您的评论中，“......哪个组件包含标题...标题的无标题html显示”，我相信您已经有了答案：没有加载的CSS可以设置标题的HTML样式。

亨德里克的答案使标签保持最小，因此效果不明显。

如果你真的需要立即设置标题样式，我担心你需要使用内联样式（没有图像或字体 - 那些也不会被加载）。保持最低限度是全部：

<!doctype html>
<html>
    <head>
        ...
        <style>
        ...
        </style>
    </head>
    <body>
       <app-root>(styled header)</app-root>
    </body>
</html>

然后在加载时，您可以删除占位符。

你也可以尝试（但是它很麻烦，很难维护）一个带有两个“加载器”的增量方法：一个非常非常最小的一个，不需要CSS /图像，然后尽快因为字体和其他极少数基本资产是onLoad'ed你可以用一个简单的动画替换它，然后从那里加载所有其余的并激活完整的Angular应用程序。

还有“packager”实用程序可以将大部分HTML，CSS和JS压缩成一个缩小的SPA包;他们中的一些人（对不起，我看到他们使用了一些，但从未使用过我自己也无法参考）也提供了如上所述的最小装载机。可能为您处理一些维护工作，也许值得一试。我知道这是因为对于一个项目，我的一个同事不得不用一个HTML5替换一个Flash“Please wait”加载器（它不是一个Angular项目，但我认为这不重要）。

Answer 3

这些是你可以尝试的东西：

（在我看来，最佳解决方案）您可以使用Angular Universal进行服务器端渲染。工作流程是：
- 用户向example.com
- 服务器没有响应纯HTML（上面的示例），但在服务器端运行Angular并呈现输出HTML
- 此HTML（与指向已编译应用的<script>标记一起发送给用户浏览器
- 首先，用户可以看到由浏览器格式化的HTML + CSS。然后浏览器启动* .js文件，并在一段时间后更换＆＃34;静态页面＆＃34;使用＆＃34;单页应用＆＃34;
- Angular可以处理在＆＃34;静态页面上执行的所有操作＆＃34; （在JavaScript启动之前），感谢BrowserModule.withServerTransition(); More about Universal can be read here.
您可以从Universal更进一步，并将Angular Universal App作为渐进式Web应用程序（PWA）提供服务。 More about PWA can be read here
再向前迈进一步，并从Google缓存中引入加速移动页面（AMP）。 More about AMP can be read here
您的index.html中永远不应该放置任何超过应用root节点的内容：

＆＃13;

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

＆＃13;

如果你真的想要一些东西＆＃34;很好＆＃34;当用户正在等待Angular时，您可以使用ie css animation创建某种加载器：

＆＃13;

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="loader.css">
    </head>
    <body>
       <app-root>
           <div id="css-loader"></div>
       </app-root>
    </body>
</html>

＆＃13;

关于第1点和第1点2＆amp; 3：Here you can find an example of Angular Universal & PWA & AMP combined.

Answer 4

我认为这种行为是不可避免的。你能做的最好是尽可能加快速度。使用最新版本，AOT和延迟加载有很大帮助或者，您可以在index.html

中添加一些css

Answer 5

这是一个功能，而不是错误。

你可以做 ~~two~~ 三件事之一：

让UA尽快获取信息，并假设人们可以告诉事情何时完全加载，或
让人们等待信息，只有在全部加载后才会显示给他们
某种荒谬的灰色区域独角兽实现，确保页面的一部分在显示之前加载但不会打扰其他部分

从历史上看，＃2是最受嘲弄的方法，特别是因为很多人都想这样做。我建议不要追求它。

页面加载时简要显示html

5 个答案: