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

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

Answer 1

尝试将微调标签嵌套在路由器插座标签内，当组件装入路由器插座时，应将其更换。

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

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

编辑：

1 个答案: