親ルートの角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

あなたの「ユーザーの構成要素は、このようにする必要があり、私はあなたのWebサービスからUser[]型を返すと仮定します。

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

リンクが.../dashboard/userの場合、リゾルバ経由でユーザーを取得してラップします。私はそれを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 
    } 
}