父亲路线的角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 
    } 
}