Angular 在等待角度2路线解析时，是否有办法显示加载屏幕？

我使用

Resolve

界面确保在显示组件之前加载模型：

路线：

const APP_ROUTES: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        component: PlatformComponent,
        canActivate: [AuthenticationGuard],
        resolve: {
          account: AccountResolver,
        },

决心：

@Injectable()
export class AccountResolver implements Resolve<Account> {

  constructor(private userService: UserService) { }

  resolve() {
    return this.userService.getAccount().first();
  }
}

@Injectable（）
导出类AccountResolver实现解析{
构造函数（私有用户服务：用户服务）{}
解决（）{
返回此.userService.getAccount（）.first（）；
}
}

应用程序组件：

@Component({
  selector: 'app-root',
  template: `
    <shared-spinner></shared-spinner>
    <router-outlet></router-outlet>
`,
})
export class AppComponent implements OnInit {

@组件({
选择器：'应用程序根'，
模板：`
`,
})
导出类AppComponent实现OnInit{

组件选择器显示加载微调器。是否有方法告诉它仅在

中没有子组件渲染时渲染？或者，是否有其他方法执行此操作

编辑： 解决方案：

@Component({
  selector: 'app-root',
  template: `<router-outlet><shared-spinner *ngIf="!initialized"></shared-spinner></router-outlet>`,
})
export class AppComponent implements OnInit {

  private initialized = false;

  constructor(private userService: UserService) { }

  ngOnInit() {
    
    this.userService.getAccount().subscribe(account => {
        if (this.initialized) {
          return;
        }
    
        if (!account) {
          return;
        }
      
        this.initialized = true;
      }
    );
  }
}

@组件({
选择器：'应用程序根'，
模板：``，
})
导出类AppComponent实现OnInit{
私有初始化=假；
构造函数（私有用户服务：用户服务）{}
恩戈尼尼特（）{
this.userService.getAccount（）.subscribe（account=>{
if（this.initialized）{
返回；
}
如果（！帐户）{
返回；
}
this.initialized=true；
}
);
}
}

---

通过这种方式，它与解析方法的功能紧密耦合。我想知道是否有更简单/更干净的东西…

尝试将微调器标记嵌套在路由器出口标记内，当组件加载到路由器出口时，应该将其替换

---

编辑：将*ngIf指令添加到微调器以切换显示的微调器。组件将直接加载在

标记之后，而不是在标记内部。

这似乎不起作用。微调器会显示，但不会消失。您可以使用*ngIf和布尔值加载在显示或不显示与条件之间切换

this.userService.getAccount（）.first（）

？是的，我想这可能行得通。您可能必须使用这个.userService.getAccount.first（）！=Null实际上已经有一个

过滤器（）

，以确保通过这种方式，我们还可以使

解析（）

正确运行。