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

Question

我正在使用 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();
  }
}

应用程序组件：

@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 方法的功能紧密耦合。不知有没有什么simpler/cleaner...

Answer 1

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

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

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

Is there a way to display a loading screen while waiting for an Angular 2 route to resolve?

angular-routing

angular

编辑：