在Angular2中使用导航进行路由时如何显示加载屏幕？

我试过了,但没能成功。我对Angular2完全陌生（不了解AngularJS）。加载屏幕没有显示，我想我需要添加一些超时，以便有时间显示，但我不知道在哪里以及如何显示。

app.component.ts

从'@angular/core'导入{Component}；
进口{
路由器，
//导入为RouterEvent以避免与DOM事件混淆
事件作为RouterEvent，
导航开始，
导航终端，
导航取消，
导航错误
}来自“@angular/router”；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./加载css.css']
})
导出类AppComponent{
//将初始值设置为true，以显示第一次加载时加载微调器
加载=真；
构造函数（专用路由器：路由器）{
router.events.subscribe（（事件：RouterEvent）=>{
本.导航接收器（事件）；
});
}
//在RouterEvent更改期间显示并隐藏加载微调器
navigationInterceptor（事件：RouterEvent）：无效{
if（导航启动的事件实例）{
这是。加载=真；
}
if（NavigationEnd的事件实例）{
这一点：加载=错误；
}
//在以下两个事件中将loading state设置为false，以在请求失败时隐藏微调器
if（导航的事件实例取消）{
这一点：加载=错误；
}
if（导航错误的事件实例）{
这一点：加载=错误；
}
}

app.component.html

---

（代码参考）。任何建议都会大有裨益。
我找到了解决方案。如果将来有人需要，请发布。

这就是我所做的…我将
setTimeout
功能添加到app.component.tsas

导入{
组成部分
}从“@angular/core”开始；
进口{
路由器，
//导入为RouterEvent以避免与DOM事件混淆
事件作为RouterEvent，
导航开始，
导航终端，
导航取消，
导航错误
}来自“@angular/router”；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./加载css.css']
})
导出类AppComponent{
//将初始值设置为true，以显示第一次加载时加载微调器
加载=真；
构造函数（专用路由器：路由器）{
router.events.subscribe（（事件：RouterEvent）=>{
本.导航接收器（事件）；
});
}
//在RouterEvent更改期间显示并隐藏加载微调器
navigationInterceptor（事件：RouterEvent）：无效{
if（导航启动的事件实例）{
这是。加载=真；
}
if（NavigationEnd的事件实例）{
setTimeout（（）=>{//此处
这一点：加载=错误；
}, 2000);
}
//在以下两个事件中将loading state设置为false，以在请求失败时隐藏微调器
if（导航的事件实例取消）{
setTimeout（（）=>{//此处
这一点：加载=错误；
}, 2000);
}
if（导航错误的事件实例）{
setTimeout（（）=>{//此处
这一点：加载=错误；
}, 2000);
}
}


并将HTML更改为


加载。。。
我找到了解决方案。如果将来有人需要，可以发布。

这就是我所做的…我将
setTimeout
功能添加到app.component.tsas

导入{
组成部分
}从“@angular/core”开始；
进口{
路由器，
//导入为RouterEvent以避免与DOM事件混淆
事件作为RouterEvent，
导航开始，
导航终端，
导航取消，
导航错误
}来自“@angular/router”；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./加载css.css']
})
导出类AppComponent{
//将初始值设置为true，以显示第一次加载时加载微调器
加载=真；
构造函数（专用路由器：路由器）{
router.events.subscribe（（事件：RouterEvent）=>{
本.导航接收器（事件）；
});
}
//在RouterEvent更改期间显示并隐藏加载微调器
navigationInterceptor（事件：RouterEvent）：无效{
if（导航启动的事件实例）{
这是。加载=真；
}
if（NavigationEnd的事件实例）{
setTimeout（（）=>{//此处
这一点：加载=错误；
}, 2000);
}
//在以下两个事件中将loading state设置为false，以在请求失败时隐藏微调器
if（导航的事件实例取消）{
setTimeout（（）=>{//此处
这一点：加载=错误；
}, 2000);
}
if（导航错误的事件实例）{
setTimeout（（）=>{//此处
这一点：加载=错误；
}, 2000);
}
}


并将HTML更改为


加载。。。
设置的超时将起作用，但它不是正确的工作方式，因为如果从一个路由切换到另一个路由时有数据延迟，它仍将显示数据延迟。为了获得更好的结果，不要使用设置的超时
设置的超时将起作用，但它不是正确的工作方式，因为如果切换到另一个路由时有数据延迟，它仍将显示数据延迟从一个路由到另一个路由。为了获得更好的结果，在路由或api调用时不要使用设置的超时值。目前，在路由@ManikandanVelayutham时，但如果我同时获得这两个值，则会很好，因为我将从json文件（在src/app/mydata.json中）获取数据还有，在这之后..你有什么错误吗？.navigationInterceptor启动吗？没有..在控制台@ManikandanVelayutham上没有任何东西。当我评论Navigationend，…Cancel，…错误；图像在路由或api调用时显示？现在在路由@ManikandanVelayutham时，但如果我同时获得这两个，那就好了，因为我将从json文件（在src/app/mydata.json中）以及之后