角2：リゾルバ依存の子コンポーネントを非同期で表示

Question

親コンポーネントにネストされた3つの子コンポーネントがあります。 私はこれらのデータを一度解決すると、これを独立に表示しようとしています。これまでのところ、完全なルートは、すべての解決がデータを取得したときにのみアクティブ化されます。その結果、すべての子コンポーネントがかなりの時間が経過してすぐに表示されます（一部の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); 
      }); 
    } 
} 

データを受信すると同時にルータに子コンポーネントを表示させる方法はありますか？ ここで何が間違っていますか？

The complete plunker

Answer 1

は、残念ながら、リゾルバが完了するとすぐにコンポーネントを表示することは現時点では不可能であり、角度の人々がそれを可能にするために、それを変更する予定がないようだ（それを待ちます）。

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