Angular 2：异步显示依赖于解析器的子组件

Posted 2023-02-23

【中文标题】Angular 2：异步显示依赖于解析器的子组件

【英文标题】：Angular 2 : Displaying resolver dependent child components asynchronously

【发布时间】：2017-12-23 07:27:48

【问题描述】：

我有三个子组件嵌套在一个父组件中。 一旦他们解决了他们的数据，我试图让这些独立显示。到目前为止，只有在所有解析都获取了它们的数据时才会激活完整的路由，这会导致所有子组件在相当长的一段时间后立即出现（一些 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（等一下）

【参考方案1】：

目前看来，不幸的是，在解析器完成后立即显示组件是不可能的，而有角的人也不打算改变它以使其成为可能。

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

【讨论】：

感谢您的跟进。这对 Angular 来说真的很令人失望，因为它似乎是一个常见的用例。

更令人失望的是，当您认为它会以一种方式工作时，结果却发现您必须丢弃所有需要花费任何时间的 Resolve 内容。