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

有没有办法强制路由器显示儿童组件，只要他们收到数据？ 我在这里做错了什么？

The complete plunker（等待它）

Answer 1

看来，不幸的是，一旦显示组件的分解完成是不可能的时刻和角的人不要改变它，使其能够计划。

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