상위 경로에 대한 각도 2 해결

Question

이 코드가 있습니다.

'사용자'에 대한이 하위 경로를 '새로운'경로로 지정하십시오. '사용자'에게 전달자가 있습니다. 잘 작동합니다.

하지만 성공 후 사용자를 만듭니다. 자식 경로에서 리디렉션 한 후 DataResolver가 작동하지 않기 때문에 '사용자'로 리디렉션되지만 새 사용자가 목록에 표시되지 않습니다.

어떻게 해결할 수 있습니까?

//Roiting 
export const ROUTES: Routes = [ 
    { path: 'dashboard', 
    component: Dashboard, 

    children: [ 
     { path: 'users', 
     component: Users, 
     resolve: { 
      users: DataResolver 
     }, 
     children: [ 
      { path: 'new', component: NewUser } 
     ] 
     }, 
    ] 
    } 
]; 


//Resolver 
@Injectable() 
export class DataResolver implements Resolve<any> { 
    constructor(private userService: UserService) {} 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> { 
    return this.userService.all(); // return users 
    } 
} 


//Component 
export class NewUser { 
    errorMessage: string; 
    user: User; 

    constructor(public route: ActivatedRoute, 
       private userService: UserService, 
       private router: Router) { 
    this.user = new User(); 
    } 

    onSubmit(): void { 
    this.userService 
     .createUser(this.user) 
     .subscribe(
      user => { 
      this.router.navigate(['/dashboard', 'users']); 
      }, 
      error => this.errorMessage = <any>error); 
    } 
} 

// USers component 
export class Users implements OnInit { 
    users: User[]; 

    constructor(public route: ActivatedRoute, 
       private router: Router) { 
    this.route.data.subscribe((data: any) => { 
     this.users = data.users; 
    }); 
    } 
} 

Answer 1

귀하의 '사용자'구성 요소는 다음과 같이해야한다, 나는 당신이 당신의 웹 서비스에서 User[] 형식을 반환 가정; 귀하의 링크가 .../dashboard/user 경우

export class Users { 
    users; 
    constructor(private _route: ActivatedRoute, ...){ 
      _route.data.subscribe((wrapper: {res: any[] }) => { 
       this.users = <User[]>wrapper.res; 
      }); 
    } 
} 

, 그것은 해결을 통해 사용자를 얻고 그것을 포장. 그냥 wrapper이라고 부르면 다른 이름을 붙일 수 있습니다. 문제를 해결 한 후 귀하의 서비스에서 응답을 래핑한다는 것을 알아 두십시오.

자세한 정보가 필요하면 알려주십시오.

편집 1 :

여기

내가 해결 프로그램을 사용하는 방법이다, 나는 그것이 예 내 사용자의 구성 요소는 다음과 같이 될

//app.route 
const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'user', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'user', 
     loadChildren: '.../user.module#UserModule' 
    } 
]; 

const rootRoutes: Routes = [ 
    ...appRoutes 
]; 

export const appRouting = RouterModule.forRoot(rootRoutes, { useHash: true }); 

//user.route 
const userRoutes: Routes = [ 
    { 
     path: '', 
     component: UserComponent, 
     children: [ 
      { 
       path: 'create', 
       component: UserCreateComponent 
      }, 
      { 
       path: '', 
       component: UserListComponent, 
       resolve: { 
        res: UserResolver 
       } 
      } 
     ] 
    } 
]; 

export const userRouting = RouterModule.forChild(userRoutes); 

//user.module 
@NgModule({ 
    imports: [ 
     CommonModule, 
     ReactiveFormsModule, 
     userRouting, 
     FormsModule 
    ], 
    declarations: [ 
     UserComponent, 
     UserCreateComponent, 
     UserListComponent 
    ], 
    providers: [ 
     UserService, 
     UserResolver 
    ] 
}) 

export class UserModule { } 

//user.resolver 
export class UserResolver implements Resolve<any>{ 
    constructor(private service: UserService) { } 

    public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> { 
     return this.service.get();//return all users 
    } 
}