javascript - 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 中使用 native 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 存储库 LINK