加载页面时短暂显示的html
在我的Angular应用中，当页面加载时，我的菜单组件html代码会短暂地显示出来。即使我用display none css隐藏了menu根元素，当页面开始加载时，html仍然会显示。我读了很多关于ng-cloak (https://docs.angularjs.org/api/ng/directive/ngCloak)的东西，但似乎Angular 4没有ngCloak。
所以我不知道如何防止这种令人不快的影响。
Angular 4是否有针对ng-cloak的等效指令？如何才能正确显示页面而不显示加载时未设置样式的html？
回答 4
Stack Overflow用户
发布于 2017-08-14 05:01:11
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之后，它将被实际的应用程序所取代。要获得白页，只需删除文本即可。
Stack Overflow用户
发布于 2018-02-16 15:38:32
我会采用@HendrikBrummermann的答案:放置一个“加载...”标签。
从你的评论中，“html the header... the unstyled of the header of the header is displayed"，我相信你已经得到了答案：还没有加载可以样式化header的...which的。
Hendrik的答案将标签保持在最低限度，因此这种效果并不明显。
如果您确实需要立即设置页眉样式，我担心您需要使用内联样式(并且没有图像或字体-这些也不会被加载)。将其保持在最低限度就行了：
<!doctype html>
<html>
<head>
...
<style>
...
</style>
</head>
<body>
<app-root>(styled header)</app-root>
</body>
</html>然后在加载时，您可以删除占位符。
你也可以用两个“加载器”尝试一个增量的方法(但这很麻烦而且很难维护)：一个非常非常小的加载器，几乎不需要CSS/图片，然后当字体和其他极少的 basic资源加载后，你可以用一个简单的动画来代替它，然后从那里你加载所有剩余的东西并激活完整的Angular应用程序。
还有一些“打包”实用程序，可以将大多数HTML、CSS和JS压缩到一个精简的SPA包中；其中一些(很抱歉，我看到有几个人用过，但我自己从来没有用过，也不能引用它们)也提供了如上所述的最小加载器。这个可能会为你做一些维护工作，也许值得一试。我之所以知道这一点，是因为在一个项目中，我的一个同事不得不将Flash“请稍等”加载程序替换为HTML5加载程序(这不是一个Angular项目，但我认为这无关紧要)。
Stack Overflow用户
发布于 2018-02-14 22:06:16
这些都是你可以尝试的东西：
- (在我看来是最好的解决方案)你可以使用Angular Universal进行服务器端渲染。工作流是：
- User sends request to `example.com`
- Server is not responding with pure HTML (example above), but runs Angular on the server side and render output HTML
- This HTML (together with `<script>` tag pointing to compiled app is send to users browser
- On the first look, the user sees HTML + CSS formatted by his browser. Then browser launches \*.js file, and after a while replace "static page" with "single page app"
- Angular can deal with all action done on "static page" (before JavaScript launch), thanks to `BrowserModule.withServerTransition();` [More about Universal can be read here.](https://universal.angular.io/)
- 你可以更进一步，将你的Angular Universal应用程序作为一个渐进式网络应用程序(PWA)。More about PWA can be read here
- Go更进一步，并从谷歌缓存中引入了加速移动页面。More about AMP can be read here.
- You永远不应该在index.html中放置应用程序
root节点以外的任何内容：
<!doctype html>
<html>
<head>
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
- 如果你真的想在用户等待Angular时拥有一些“好”的东西，你可以用ie 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点：Here you can find an example of Angular Universal & PWA & AMP combined.
https://stackoverflow.com/questions/45664008
复制相似问题
腾讯云开发者
