angular - 我的 Angular 8 Resolver 不会唤起。页面加载而不获取数据

Question

在我的 Angular 8 项目中，我有一个这样的“路线”。

app-routing.module.ts（带有路由和解析器）-> member-edit.resolver.ts（覆盖了可访问 accountService 的解析方法）-> member-edit.component.ts（尝试在 ngOnInit( ))

我的解析器没有调用，所以我没有在 ngOnInit() 中接收任何数据

我在 Angular 6 项目中有相同的代码，它工作正常。我找不到任何解决方案来强制它在我的 Angular 8 项目中工作。

我只想在我的 Angular 8 项目中使用解析器将数据加载到组件中。

我试图降级我的 Angular 8 项目，但没有成功。我遇到了一些问题，并且有很多错误。否则它不会是一个很好的解决方案。

如果我调用我的服务来获取数据，它工作得很好。但是当我使用我的解析器时，我无法接收任何数据。

我注意到 Angular 8 -> '@angular/router' 与 Angular 6 相比有一些变化，但我找不到任何解决方案来解决它。（尤其是ActivatedRoute）

我的 Angular 8 [ng v]：（不工作的解析器）

    Angular CLI: 8.1.3
    Node: 10.16.0
    OS: win32 x64
    Angular: 8.1.3
    ... animations, cli, common, compiler, compiler-cli, core, forms
    ... language-service, platform-browser, platform-browser-dynamic
    ... router

    Package                           Version
    -----------------------------------------------------------
    @angular-devkit/architect         0.801.3
    @angular-devkit/build-angular     0.801.3
    @angular-devkit/build-optimizer   0.801.3
    @angular-devkit/build-webpack     0.801.3
    @angular-devkit/core              8.1.3
    @angular-devkit/schematics        8.1.3
    @angular/.compiler-cli.MODULES    <error>
    @angular/cdk                      8.1.2
    @angular/material                 8.1.2
    @ngtools/webpack                  8.1.3
    @schematics/angular               8.1.3
    @schematics/update                0.801.3
    rxjs                              6.4.0
    typescript                        3.4.5
    webpack                           4.35.2

我的 Angular 6 [ng v]：（解析器有数据）

    Angular CLI: 6.0.8
    Node: 10.16.0
    OS: win32 x64
    Angular: 6.1.10
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

    Package                           Version
    -----------------------------------------------------------
    @angular-devkit/architect         0.6.8
    @angular-devkit/build-angular     0.6.8
    @angular-devkit/build-optimizer   0.6.8
    @angular-devkit/core              0.6.8
    @angular-devkit/schematics        0.6.8
    @angular/cli                      6.0.8
    @ngtools/webpack                  6.0.8
    @schematics/angular               0.6.8
    @schematics/update                0.6.8
    rxjs                              6.0.0
    typescript                        2.7.2
    webpack                           4.8.3

好的，让我们开始吧..

所以专注于3个文件：

member-edit.component.ts
member-edit.resolver.ts
app-routing.module.ts

“成员-edit.component.ts：”

在开始时，我有 member-edit.component.ts，我将专注于 ngOnInit() 方法，看起来像这样：

    ngOnInit() {
    this.registerForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      secondName: ['', ],
      surname: ['', Validators.required]
    }, {});

     this.route.data.subscribe(data => {
      console.log('Check route resolver data');
      this.account = data.account;
      console.log(data);
      console.log(this.account);
    });
    }

我的 member-edit.resolver.ts 看起来像这样：

        @Injectable()
    export class MemberEditResolver implements Resolve<User> {
        constructor(private userService: UserService, private router: Router, private alertify: AlertifyService, private authService: AuthService) {}

        resolve(route: ActivatedRouteSnapshot): Observable<User> {
            return this.userService.getUser(this.authService.decodedToken.nameid).pipe(
                catchError(error => {
                    this.alertify.error('Problem with retriving your data.');
                    this.router.navigate(['/members']);
                    return of(null); // null ale jako observer
                })
            );
        }
    }

和路由文件：

        const routes: Routes = [
      { path: '', component: HomeComponent },
      {
        path: '', // localhost:4200/members etc..
        runGuardsAndResolvers: 'always',
        canActivate: [AuthGuard],
        children: [
          { path: 'home', component: HomeComponent },
          { path: 'thesis', component: ThesisComponent },
          { path: 'promoters', component: PromotersComponent },
          { path: 'groups', component: GroupsComponent },
          { path: 'messages', component: MessagesComponent },
          { path: 'help', component: HelpComponent },
          { path: 'adminPanel', component: AdminPanelComponent },
          { path: 'member/edit', component: MemberEditComponent },
          // { path: 'members', component: MemberListComponent, resolve: { users: MemberListResolver } },
          // { path: 'members/:id', component: MemberDetailComponent, resolve: { user: MemberDetailResolver } },
          {
            path: 'member/edit',
            component: MemberEditComponent,
            resolve: { account: MemberEditResolver }
          }
        ]
      },
      { path: '**', redirectTo: '', pathMatch: 'full' }
    ];

    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
      providers: [MemberEditResolver]
    })

    export class AppRoutingModule {}

我有点沮丧，因为我不知道我还应该做什么。在 Angular 6 上一切正常，但在 8 上，我的解析器不加载任何数据，所以我没有任何内容：

this.account = data.account;

出于调试目的，我使用了 console.log，而这个仅使用 __ proto __ 接收到我的控制台对象

我应该怎么做才能从解析器加载数据？

标签： angulartypescriptresolver