데이터를 각도 4로 설정 한 후 경로로드

Question

내 애플리케이션에는 애플리케이션 전반에 걸쳐 공통적 인 데이터가 있습니다. 그러나보기가로드 된 후 데이터가 채워집니다. 예를 들어 사용자 설정, 프로필 등의 데이터가 있습니다. 보기를로드하기 전에 데이터로드를위한 resolve를 사용할 수 있지만 모든 경로에 해결 방법을 추가 할 수는 없습니다. 따라서 특정 경로가 새로 고쳐지면 데이터를 사용할 수 없거나 뷰가로드 된 후 서버의 응답이옵니다.

어떻게이 작업을 수행 할 수 있습니까?

다음은 내가 달성하고자하는 샘플 코드입니다. in App.Component.ts 토큰이 있으면 요청한 페이지로 리디렉션하고 그렇지 않으면 로그인으로 리디렉션합니다.

if (token) 
{ 
    this.commonServ.loadAppData(); 
    this._router.navigate([(path == 'login' || path == '') ? 'test' : path]);      
} 
else 
    this._router.navigate(['login']); 

로드 데이터 메소드는 몇 가지 API를 사용하여 데이터를 모델에로드합니다. 예를 들어

:

public loadAppData() { 

     this.getUserSettings().then(settings => { 
      if (settings) { 
       //Do Something 
      } 
     }, error => { 

      }); 



     this.setUserProfile().then(settings => { 
      //Do something 

     }); 

    } 

뷰가로드 된 후 setUserProfile의 데이터가 제공됩니다. 어떻게이 작업을 수행 할 수 있습니까?

감사합니다.

Answer 1

다른 구성 요소보다 먼저로드되는 "셸"구성 요소를 정의하고 해당 구성 요소에 리졸버를 추가하십시오.

앱 템플릿

<router-outlet></router-outlet> 

쉘 구성 요소 나는 그녀를 만든

@NgModule({ 
    imports: [ 
     RouterModule.forRoot([ 
      { 
       path: '', 
       component: ShellComponent, 
       resolve: { data: DataResolver }. // <--- HERE 
       children: [ 
        { path: 'welcome', component: WelcomeComponent }, 
        { 
         path: 'products', 
         canActivate: [AuthGuard], 
         loadChildren: './products/product.module#ProductModule' 
        }, 
        { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 
       ] 
      }, 
      { path: '**', component: PageNotFoundComponent } 
     ]) 
    ], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { }