角度 4 正确显示加载屏幕

Question

我正在使用 Angular 4，我想在路线导航之间显示加载屏幕(基本微调器)。 我使用这种技术来订阅正确的事件，并使用 style.visibility 来显示/隐藏我的微调器。

出于某种原因，尽管我正确检测了导航的开始和结束事件，但我的微调器不会显示。事实上，尽管可见性字段正在正确更改，但微调器仍然不会显示。

我设法显示它的唯一方法是强制它始终设置为"可见"而不是"隐藏"。

附上我的代码的相关部分：

app.component.ts：

constructor (private utils: UtilsService, private router: Router) {
		// Intercept all navigation events
		router.events.subscribe((event: RouterEvent) => {
			this.navigationInterceptor(event)
		})
		// Calls our initializer
		utils.init();
	}
	/* Intercept the navigator in order to display a loading screen */
	navigationInterceptor(event: RouterEvent): void {
		// Starting the navigation
		if (event instanceof NavigationStart) {
			this.loading = true;
		}
		// The navigation ended
		if (event instanceof NavigationEnd) {
			this.loading = false;
		}
		// Set loading state to false in both of the below events to hide the spinner in case a request fails
		if (event instanceof NavigationCancel) {
			this.loading = false;
		}
		if (event instanceof NavigationError) {
			this.loading = false;
		}
		// Get our loading container
		var loading_container = document.getElementById('loader-container');
		// If our loading container isn't available, this is the application first launch (ie. full refresh)
		// so we need to display a full loading logo
		if (loading_container) {
			// This is just a redirect, not a full refresh, so just hide or show the loading screen
			document.getElementById('loader-container').style.visibility = this.loading ? 'visible' : 'hidden';
		}
	}

app.component.html：

<div style="position: fixed; left: 220px; width: calc(100% - 220px); height: 100%; z-index: 10000; background-color: rgba(255, 255, 255, 0.6);" id = "loader-container">
	<div style = "top: 30%;" class="sk-spinner sk-spinner-double-bounce">
		<div class="sk-double-bounce1"></div>
		<div class="sk-double-bounce2"></div>
	</div>
</div>
<!-- Main view/routes wrapper-->
<router-outlet>
</router-outlet>

Answer 1

问题是你正在尝试在构造函数的 Angular 中使用原生 javascript，而那时 DOM 还没有准备好。您应该在AfterViewInit中使用它。

在这种情况下，您可以拥有一个加载变量，并且您所需要的只是在模板中使用它来显示和关闭微调器，具体取决于导航ngIf。

<div *ngIf = "loading" class = "main">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>

.CSS

.spinner > div {
background-color: black;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}  20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}

工作示例链接和 git 存储库链接

Answer 2

我已经解决了这个问题。 问题是在 JS DOM 中，更改只会在当前代码完成执行后执行，从而将我的微调器的出现/消失延迟到代码执行的最后。这显然导致它根本不显示，因为代码完成执行的那一刻显然已经触发了 NavigationEnd 事件。

我不确定这是否是正确的解决方案，因为我最终在所有导航链接上都使用了 onClick 事件：

<a (click)="routeClick('/Home')"><i class="fa fa-th-large"></i> <span class="nav-label">Home</span></a>

并创建了 routeClick() 函数，如下所示：

public routeClick(href : string) : void {
// Display the loading spinner
UtilsService.loading = true;
// Redirect to the new route asynchronously (IMPORTANT! Otherwise the spinner will not show!)
setTimeout('location.href = "#' + href + '";', 1);
}

这导致在实际导航开始之前执行所有 DOM 更改。

希望这有帮助！