Angular 2：異步顯示與解析器相關的子組件

Question

我在父組件中嵌套了三個子組件。 一旦它們解析了數據，我試圖使它們獨立顯示。 到目前為止，只有在所有解析都已獲取其數據后才激活完整路由，這導致所有子組件在相當長的一段時間后立即出現（某些API調用很長）。

這是一些簡化的代碼：

路線：

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    children : [
      {
        path: 'cpt1',
        component: Component1,
        outlet: 'cpt1',
        resolve: {
          data: Cpt1Resolve
        }
      },
      {
        path: 'cpt2',
        component: Component2,
        outlet: 'cpt2',
        resolve: {
          data: Cpt2Resolve
        }
      },
      {
        path: 'cpt3',
        component: Component3,
        outlet: 'cpt3',
        resolve: {
          data: Cpt3Resolve
        }
      }
    ]
  }
];

應用程序組件：

@Component({
  selector: 'my-app',
  template: `
      <h1>Angular 2 Asynchronous loading of children components</h1>
      <div>
        <router-outlet></router-outlet>
      </div>`
})
export class AppComponent {}

家庭組件：

@Component({
  selector: 'home-cpt',
  template: `
  <h2>You're on home</h2>
  <router-outlet></router-outlet>
  <router-outlet name="cpt1"></router-outlet>
  <router-outlet name="cpt2"></router-outlet>
  <router-outlet name="cpt3"></router-outlet>
  `
})

export class HomeComponent {
   constructor(router: Router) {
    router.navigateByUrl('home/(cpt1:cpt1//cpt2:cpt2//cpt3:cpt3)');
  }
}

最后是一個子組件，它可以解決：

// CHILD COMPONENT 1

@Component({
  selector: 'cpt1',
  template: `
  <h3>Cpt1 displayed</h3>
  `
})

export class Component1 implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.route.data.forEach((data: any) => {   
      console.log('data cpt 1', data);
    });
  }

}

@Injectable()
export class Cpt1Resolve implements Resolve<any> {
    constructor() {}
        resolve (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
            return Observable.create((observer) => {
                  setTimeout(() => { 
                    observer.next('Sample Text 1');
                    observer.complete();
                  }, 2000);
            });
     }
}

有沒有一種方法可以迫使路由器在收到子組件后立即顯示它們？ 我在這里做錯了什么？

完整的塞子 （等待它）

Answer 1

似乎不幸的是，目前無法在解析器完成后立即顯示組件，而且棱角分明的人也不打算更改它以使其成為可能。

https://github.com/angular/angular/issues/14064