3

在我的 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 的情况下正确显示页面？

4

5 回答 5

5

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

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

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

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

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

于 2017-08-13T21:01:10.980 回答
2

我会选择@HendrikBrummermann 的回答：放置一个“正在加载...”标签。

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

Hendrik 的回答将标签保持在最低限度，因此这种效果并不明显。

如果您确实需要立即设置标题样式，我担心您需要使用内联样式（并且没有图像或字体 - 也不会加载）。保持最低限度就是：

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

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

您也可以尝试（但它很混乱且难以维护）使用两个“加载器”的增量方法：一个非常非常小的一个，几乎不需要 CSS/图像，然后只要字体和其他非常少的基本资产是onLoad'ed 你可以用一个简单的动画替换它，然后从那里加载所有其余部分并激活完整的 Angular 应用程序。

还有一些“打包器”实用程序可以将您的大部分 HTML、CSS 和 JS 压缩到一个缩小的 SPA 包中；其中一些（我很抱歉，我看到其中一些被使用，但我自己从未使用过并且无法引用它们）也提供了如上所述的最小加载器。这可能会为您进行一些维护，并且可能值得一试。我知道这一点是因为对于一个项目，我的一位同事不得不用 HTML5 替换 Flash“请稍候”加载器（这不是 Angular 项目，但我认为这并不重要）。

于 2018-02-16T07:38:32.290 回答
1

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

  1. （在我看来最好的解决方案）您可以使用 Angular Universal 进行服务器端渲染。工作流程是：

    • 用户发送请求到example.com
    • 服务器没有使用纯 HTML 响应（上面的示例），但在服务器端运行 Angular 并呈现输出 HTML
    • 此 HTML（连同<script>指向已编译应用程序的标记一起发送到用户浏览器
    • 乍一看，用户会看到由其浏览器格式化的 HTML + CSS。然后浏览器启动 *.js 文件，一段时间后将“静态页面”替换为“单页应用程序”
    • Angular 可以处理在“静态页面”上完成的所有操作（在 JavaScript 启动之前），这要感谢BrowserModule.withServerTransition(); 更多关于 Universal 的内容可以在这里阅读。

  2. 您可以比 Universal 更进一步，将您的 Angular 通用应用程序作为渐进式 Web 应用程序 (PWA) 提供服务。可以在此处阅读有关 PWA 的更多信息

  3. 更进一步，从 Google 缓存中引入 Accelerated Mobile Page (AMP)。可以在此处阅读有关 AMP 的更多信息。

  4. 您永远不应该root在 index.html 中放置除应用程序节点之外的任何内容：

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

  1. 如果您真的想在用户等待 Angular 时拥有一些“好”的东西，您可以创建某种带有即 css 动画的加载器：

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

关于第 1 点、第 2 点和第 3 点：在这里您可以找到 Angular Universal & PWA & AMP 组合的示例。

于 2018-02-14T14:06:16.160 回答
0

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

于 2017-08-13T19:45:08.267 回答
0

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

您可以执行以下操作之一二三件事：

  1. 让 UA 尽快获取信息，并假设人们可以知道什么时候已经完全加载，或者
  2. 让人们等待信息，只有在信息全部加载后才显示给他们
  3. 某种荒谬的灰色区域独角兽实现，确保页面的一部分在显示之前加载，但不打扰其他部分

从历史上看，#2 一直是最受嘲笑的方法，尤其是在很多人想要这样做的时候。我建议甚至不要追求它。

于 2018-02-15T17:31:01.970 回答