在加载第一个组件之前在 Angular 中显示一个预加载器
我正在使用Angular 6。
我的应用程序在加载组件之前需要几秒钟的时间，而这些时间用于加载资源和验证用户。
当所有这些发生时，我的应用程序显示一个空白页面。
我想用一个预加载器替换那个丑陋的白页，该预加载器将在所有后台进程完成之前一直显示。
对于我添加了一个CSS加载微调里面index.html像
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<base href="/">
<!-- Fonts and icons -->
</head>
<body>
<app-root>
<!-- Pre-loading spinner -->
<!-- This code within the app-root will be wiped of once the child component is loaded -->
<!-- This code will not even be shown in the source code once the child component is loaded -->
<!-- We can put any code css/html/image/etc here -->
<style>
/** CSS here. Since it will be wiped totally, 'll not cause any impact to the core stylesheet.
</style>
Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</app-root>
</body>
</html>
这会显示一个页面
但问题是。第一个加载的组件是app.component.html有以下内容
<router-outlet></router-outlet>
进一步加载另一个组件admin-layout-component.html的内容
<div class="wrapper">
<div class="sidebar" data-color="red">
<app-sidebar></app-sidebar>
</div>
<div class="main-panel">
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
</div>
只要app.component加载，从微调的内容的index.html被删除，直到开始显示空白页管理员布局被加载。
我尝试在app.component.html的路由器出口中添加相同的样式代码，但是当加载组件时，内容与微调器一起添加，微调器不会从其他页面中删除。
如何在app.component.html加载仪表板页面之前也显示微调器。
这是它是如何工作的视频：https : //youtu.be/RSlTi0EQHm4
Jim*_*äll 14
根据 Sunil 的回答，我在 Angular 8 中得到了这个。我从 App 组件中隐藏了 loader 元素，该组件在任何其他组件之前初始化。所以没有必要在任何地方添加这个。
不建议使用ElementRef操作 DOM，因此我使用Renderer2。
索引.html：
<body class="theme-primary">
<div id="loader">
<style>
.application-loading-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.application-loading-box {
width: 300px;
margin: 5px;
text-align: center;
}
</style>
<div class="application-loading-container">
<div class="application-loading-box"><h2>Loading...</h2></div>
</div>
</div>
<app-root></app-root>
</body>
app.component.ts:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
constructor(private renderer: Renderer2) {}
ngAfterViewInit() {
let loader = this.renderer.selectRootElement('#loader');
this.renderer.setStyle(loader, 'display', 'none');
}
}
成分
@Component({
selector: 'body[osk-root]',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent{/* Not need remove element or change style*/}
索引.html
<body osk-root><!--YOUR LOADER--></body>
成功加载appcomponent后，Angular清除body[osk-root]元素的innerHtml
（注意我在 Angular 9 中使用类似这样的方式）
- 这是完美的，因为它不依赖于加载角度并立即显示，我已将样式包含在 <app-root> 中，因此它会在启动时重置样式，就像魅力一样！要在这里测试，请复制 HTML 并将其放入 index.html 内的 <app-root> 内，您应该拥有一个功能齐全的预加载屏幕 https://codepen.io/Cruelplatypus67/pen/rNLVggQ (2认同)
首先，您的实现是显示加载旋转器的非常标准的方式。
问题
问题不在于应用程序组件。加载应用程序组件后，微调器消失。您看到的空白页面是因为仪表板组件尺寸巨大并且可能有多个 API 调用。所以基本上旋转器按预期工作。问题出在仪表板组件上
使固定
1.如果要修复，则需要在仪表板组件中隐藏手柄微调器。创建 a 并将微调器内容放入其中，而不是<app-root>
<body>
<div id="loader">
<!-- Pre-loading spinner -->
<!-- This code within the app-root will be wiped of once the child component is loaded -->
<!-- This code will not even be shown in the source code once the child component is loaded -->
<!-- We can put any code css/html/image/etc here -->
<style>
/** CSS here. Since it will be wiped totally, 'll not cause any impact to the core stylesheet.
</style>
Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</div>
<app-root></app-root>
</body>
仪表板组件
隐藏带有 id loader 的 divngAfterViewInit
@Component({selector: 'dashbaord', template: `...`})
class DashboardComponent implements AfterViewInit {
constructor(private elRef:ElementRef) {}
ngAfterViewInit() {
let loader = this.elRef.nativeElement.querySelector('#loader');
loader.style.display = "none"; //hide loader
}
}
| 归档时间： |
|
| 查看次数： |
14556 次 |
| 最近记录： |