以角度 8 加载页面时 Css 分散
Posted
技术标签:
【中文标题】以角度 8 加载页面时 Css 分散【英文标题】：Css gets scattered while loading a page in angular 8 【发布时间】：2020-04-20 21:51:35 【问题描述】：我正在构建一个 Angular 项目，我在其中使用预先设计的 html 模板。我在加载页面时使用延迟加载，我不完全知道如何描述这个问题，我只能说当我加载页面时， css 分散，如我附加的 gif 所示。
我已经创建了常用的导航栏和页脚组件，所有的 css 链接都在那里。以下是我的 homepagecomponent.html 的代码
<app-basehome></app-basehome>
<app-navbarhome></app-navbarhome>
<body>
// Rest Html
</body>
<app-footerhome></app-footerhome>
谁能告诉我为什么会出现这个问题以及如何解决它？ .我猜这可能是因为延迟加载。
我的 app.routing 模块
import NgModule from '@angular/core';
import Routes, RouterModule from '@angular/router';
const routes: Routes = [
path:'',
loadChildren:'./website/website.module#WebsiteModule'
,
path: 'admin',
loadChildren: './admin/admin.module#AdminModule'
];
@NgModule(
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
)
export class AppRoutingModule
我只是将 css 文件放在 src/assets 文件夹中并提供类似的链接
<!-- Owl Carousel ->
<link href="/assets/home/common/owl-carousel/css/owl.carousel.min.css" rel="stylesheet" type="text/css">
<!-- Fancybox -->
<link rel="stylesheet" href="/assets/home/common/fancybox/jquery.fancybox.min.css" type="text/css" />
<!-- Theme Style -->
<link href="/assets/home/css/style.css" rel="stylesheet" type="text/css">
【问题讨论】：
你是把css添加到当前组件的css还是全局样式文件中？ 对于全局 css，您必须将类放在style.css 中，对于每个组件，您必须在相应的 component.css 中设置 css-class
嗯，实际上我只是将 css 文件放在可用的资产文件夹中并提供链接。
然后你必须从全局styles.css或者(scss-如果你使用scss)文件中导入css文件
请查看我的问题中的更新。 @DilshanJayasanka
【参考方案1】：
将链接 css 转换为 angular.json 文件
【讨论】：
【参考方案2】：不仅仅是将文件包含在组件 html 文件中，只需将它们导入 style.css（全局 style.css）中，如
@import "/assets/home/common/fancybox/jquery.fancybox.min.css";
看下面reference
【讨论】：
这实际上有点工作，但等待一些更声明性的答案。谢谢【参考方案3】：不幸的是，这是 Angular 应用程序的正常行为，在应用程序完全加载后应用 css。
您可以采用的唯一解决方法是创建一个.css 文件，在该文件中插入所有必须以高优先级应用的样式并将其包含在头部的index.html 中，这样做您将有一个显着的改进，但我不知道你是否会完全解决。
此外，即使不美观，您也可以在不导入链接的情况下将您的样式包含在头部，而是直接在页面上 <style> 标签之间，将性能再提高 15% - 20%。
如果有人知道更好的方法，我会很高兴你提出建议。
【讨论】：
是的。看起来是这样。但是我有预定义的样式，我无法隔离。尽管按照@shubh 导入 css 工作以上是关于以角度 8 加载页面时 Css 分散的主要内容，如果未能解决你的问题，请参考以下文章
如何在初始页面加载之前加载 CSS 数据主题以防止主题之间闪烁？