angular - 有没有办法在等待 Angular 2 路由解析时显示加载屏幕？

Question

我正在使用 Resolve确保在显示组件之前加载模型的接口(interface):

路线:

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

应用组件:

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

<shared-spinner>组件选择器显示加载微调器。有没有办法告诉它只在 <router-outlet> 中还没有子组件呈现时才呈现？ ？或者，还有其他方法可以做到这一点吗？

编辑:

解决方法:

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

以这种方式，它与 resolve 方法的功能紧密耦合。我想知道是否有更简单/更清洁的东西......

Answer 1

尝试将 spinner 标签嵌套在路由器导出标签内，当组件加载到路由器导出时，它应该被替换。

编辑:将 *ngIf 指令添加到微调器以切换它的显示。组件将在 <router-outlet> 之后直接加载标签，而不是标签内部。