时间戳

首页 > 解决方案 > 在组件中更新数据后使用解析器在子组件中加载数据

angular - 在组件中更新数据后使用解析器在子组件中加载数据

问题描述

我有一个角度组件“update_profile”，它使用解析器服务加载数据。

我还使用选择器在另一个组件“complete_profile”中调用“update_profile”。当需要编辑时，我正在通过 ngIf 启动组件。

为了能够在“complete_profile”中加载数据，我还在父组件中注入了解析器。

const routes: Routes = [
  {
    path: "",
    component: OrganiserLayoutComponent,
    children: [
      { 
        path: "complete_profile", 
        component: MyProfileComponent, 
        resolve: { profileDetails: UpdateProfileResolverService } 
      },
      {
        path: "update_profile",
        component: UpdateProfileComponent,
        resolve: { profileDetails: UpdateProfileResolverService },
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})

update_profile 组件

ngOnInit() {
    this.dataSubscription = this.activatedRoute.data.subscribe(
    (data: { profileDetails: any }) => {
      this.profileData = data.profileDetails["data"];
      console.log(this.profileData);
      },
    );
}

解析器服务

import { Injectable } from '@angular/core';
import { Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { AppServiceService } from './../../../common/services/app-service.service';
import { AuthServiceService } from './../../../common/services/auth-service.service';

@Injectable({providedIn:'root'})
export class UpdateProfileResolverService implements Resolve<any> {
  constructor(public appService: AppServiceService, public auService: AuthServiceService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    let currentUser;
    this.auService.User.subscribe(user=>{
      if(user){
        currentUser=user.token;
      }
    }).unsubscribe();
    return this.appService.getParams2('/organizer/', currentUser.Id);
  }
}

在 complete_profile 中调用 update_profile

<app-update-profile *ngIf="isShown"></app-update-profile>

当我要去 update_profile 路线时，我的数据总是会更新..没关系。但是在 complete_profile 组件中，update_profile 是通过在 update_profile 选择器上应用 ngIf 指令来显示的，并且每当我单击按钮给出真实条件以在 complete_profile 组件中显示 update_profile 组件时，数据都不会更新。它显示了解析器在完成配置文件初始化时检索到的先前数据。

我了解解析器仅在路由更改时才解析数据。但是每当初始化 update_profile 组件时，我都需要解析更新的数据。

标签： angularangular-routerangular-resolver

解决方案

您的解析器代码不正确。

import { Injectable } from '@angular/core';
import { Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { AppServiceService } from './../../../common/services/app-service.service';
import { AuthServiceService } from './../../../common/services/auth-service.service';
import { take, map } from 'rxjs/operators'

@Injectable({providedIn:'root'})
export class UpdateProfileResolverService implements Resolve<any> {
  constructor(public appService: AppServiceService, public auService: AuthServiceService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){

    return this.auService.User.pipe( 
      take(1),
      map(user => this.appService.getParams2('/organizer/', user?.Id);
    )
  }
}

本质上，您需要将调用返回到this.appService.getParams2您的订阅块内，否则您拥有的变量currentUser将是未定义的。

推荐阅读