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还没有准备好。您应该在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>显示和关闭微调器，具体取决于导航。

.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);
     }
}

<强> CSS

Sub Test1()        
    Dim hyperLink As String
    hyperLink = InputBox("Please input hyperlink", "My Parameter")

    '...

End Sub

工作示例link和git repo LINK

Answer 2

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

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

＆＃13;

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

＆＃13;

并创建了routeClick（）函数，如下所示：

＆＃13;

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);
  }

＆＃13;

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

希望这有帮助！

Angular 4正确显示加载屏幕

2 个答案: