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

您的用户＆＃39;组件应该是这样的，我假设您从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
    }
}

父级路由的Angular 2解析

1 个答案: