Question

我获得了行星数据和行星细节组件，并且我在行星数据中接收了照片对象，但是在行星细节中导航之后，我尝试使用解析器在导航到行星细节之前获取该对象，是吗？可能，而不仅仅是获得ID ？。我不需要Input（）cos我想导航并使用整个对象，并且我尝试使用queryParams但我不需要一些数据或字符串。我需要整个对象。我一直在阅读的内容：

How do I pass data to Angular routed components?

我一直在阅读->

https://codeburst.io/understanding-resolvers-in-angular-736e9db71267

https://angular.io/guide/router#resolve-pre-fetching-component-data

我试图将对象存储到存储中，但是它工作正常，但是我似乎测试的不是一个好方法-> http://next.plnkr.co/edit/NpLKAgY3FkzhOK9eBeIb?p=preview&preview（这也可行，但是刷新页面后，一切都会消失，因为ngOnDestroy（））

即使我尝试了更多尝试，但我也不想写一本书，只是让您知道即时通讯确实停滞不前，而我尝试了很多事情。最终，我决定了一种更好的方法，我试图通过分解器预取对象（照片）并进行行星细节处理，以显示它并学习有关知识，而不仅仅是为一些异步数据替换旋转加载器瓦特。

// planet-routing.module.ts

const planetRoutes: Routes = [
    { path: '', component: PlanetDataComponent, pathMatch: 'full'},
    { path: 'detail/:id',
      component: PlanetDetailComponent,
      resolve: {
        photo: PlanetDetailResolverService
    }},
    { path: '**', component: PlanetDataComponent}
];
@NgModule({
    imports: [
        RouterModule.forRoot(planetRoutes)
    ],
    exports: [RouterModule],
})
export class PlanetRoutingModule {}

// planet-detail.component.ts

pics: Photo;

  constructor(private route: ActivatedRoute, private location: Location) {}


  ngOnInit() {
    this.route.data.subscribe((data: { photo: Photo }) => {
      this. pics = data.photo;
    });
  }

我正在尝试执行以下操作：

// planet-detail.resolver.service.ts

    constructor(private apiService: ApiService, private router: Router) {}

      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Photo> | Observable<never> {

        const obj = route.paramMap.get('obj'); // Just to show what i need

        return this.apiService.getPhotoById(obj).pipe(
          take(1),
          mergeMap(photo => {
            if (photo) {
              return of(photo);
            } else {
              this.router.navigate(['']);
              return EMPTY;
            }
          })
        );

      }
    }

// api.service.ts

export class ApiService {

  private photo$: BehaviorSubject<Photo> = new BehaviorSubject<Photo>(Photo); // Property Id is missing, just a test to know what i need

  constructor(private http: HttpClient) {}


  private getQueryData(query: string, camType: string): string {

    const apiKey = `asdasdad123123313123YArlTvlhwr3fEhYyM`;
    const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/${query}/photos?sol=1000&camera=${camType}&api_key=${apiKey}`;

    return apiUrl;
  }

  getRoverCameras(roverType: string, abbreviation: string): Observable<Photo> {
    return this.http.get<Photo>(`${this.getQueryData(roverType, abbreviation)}`);
  }

  getPhoto() {
    return this.photo$;
  }

  getPhotoById(obj: Photo) {
    return this.getPhoto().pipe(
      map(photo => photo // This is my big deal...
                         // if photo = obj
                         // return or something like that
    );
  }


}

Answer 1

您必须将对象存储在服务的任何对象中，并且应将服务的同一实例注入其他组件中，因为解析程序的作用是获取已在本地存储的数据或通过发出htttp请求，这意味着解析器方法需要知道从何处获取数据并将其提供给订阅者

使用解析器处理对象

1 个答案: