Angular 4 正确显示加载屏幕

Question

我正在使用 Angular 4，我想在路线导航之间显示一个加载屏幕（基本微调器）。 我使用this 技术来订阅正确的事件，并使用 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);
     }
}

工作示例 link 和 git repo LINK

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 更改在实际导航开始之前执行。

希望这会有所帮助！