Angular - 404 (не найдено) при загрузке асинхронных данных из конечной точки - PullRequest
Новая
       35

Angular - 404 (не найдено) при загрузке асинхронных данных из конечной точки

0 голосов
/ 23 октября 2018

Я продолжаю получать ошибку 404 на моем медиаплеере, так как свойство «sermon.fileName» становится доступным после загрузки компонента на экране.Как я могу обойти это?

enter image description here

sermon.component.ts 

import { Component, OnInit, ChangeDetectorRef, AfterViewChecked } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiProvider } from '../../providers/api/api';
import { Breakpoints, BreakpointState, BreakpointObserver } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { SermonModule } from './sermon';
import { VgAPI } from 'videogular2/core';

@Component({
  templateUrl: './sermon.component.html',
  providers: [ApiProvider]
})
export class SermonComponent implements OnInit, AfterViewChecked {
  constructor(private apiProvider: ApiProvider,
    private route: ActivatedRoute,
    private breakpointObserver: BreakpointObserver,
    private cdRef: ChangeDetectorRef
  ) { }

  isMobile: Observable<BreakpointState>;
  public id: String;
  public sermon = {} as SermonModule.Sermon;
  api: VgAPI;

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
    this.getSermon(this.id);
    this.isMobile = this.breakpointObserver.observe(Breakpoints.Handset);
  }

  ngAfterViewChecked() {
    this.cdRef.detectChanges();
  }

  onPlayerReady(api: VgAPI) {
    this.api = api;

    this.api.getDefaultMedia().subscriptions.ended.subscribe(
      () => {
        this.api.getDefaultMedia().currentTime = 0;
      }
    );
  }

  getSermon(id: String) {
    this.apiProvider.getSermon(id).subscribe((data: SermonModule.Sermon) => {
      if (environment.production === false) {
        console.log(data);
        console.log(new SermonObject().deserialize(data));
      }
      this.sermon = new SermonObject().deserialize(data);
    });
  }
}

class SermonObject implements SermonModule.Serializable<SermonModule.Sermon> {
  id: string;
  name: string;
  fileName: string;
  speaker: string;
  description: string;
  tags: string[];
  date: string;
  sermonSession: string;

  deserialize(input) {
    this.id = input.id;
    this.name = input.name;
    this.fileName = input.fileName;
    this.speaker = input.speaker;
    this.description = input.description;
    this.tags = input.tags;
    this.date = input.date;
    this.sermonSession = input.sermonSession;
    return this;
  }
}

sermon.component.html 

<vg-player style="height: 50px;">
  <vg-controls>
    <vg-play-pause></vg-play-pause>
    <vg-playback-button></vg-playback-button>
    <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
    <vg-scrub-bar>
      <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
      <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>
    <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
    <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
    <vg-mute></vg-mute>
    <vg-fullscreen></vg-fullscreen>
  </vg-controls>
  <audio #media [vgMedia]="media" preload="auto">
    <source [src]="sermon?.fileName" type="audio/mp3">
  </audio>
</vg-player>

api.provider.ts 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { map } from 'rxjs/operators';

@Injectable()
export class ApiProvider {
  private apiUrl = environment.apiUrl;
  private bookUrl = 'assets/data/books.json';
  private speakerUrl = 'assets/data/speakers.json';

  constructor(private httpClient: HttpClient) { }

  public getAllSermons() {
    return this.httpClient.get(this.apiUrl + '/sermon').pipe(map((data: any) => data.data)
    );
  }

  public getSermon(id: String) {
    return this.httpClient.get(this.apiUrl + '/sermon/' + id).pipe(map((data: any) => data.data)
    );
  }


  public getAllBooks() {
    return this.httpClient.get(this.bookUrl).pipe(map((data: any) => data)
    );
  }

  public getAllSpeakers() {
    return this.httpClient.get(this.speakerUrl).pipe(map((data: any) => data)
    );
  }

  public getAllSessions() {
    return this.httpClient.get(this.apiUrl + '/sermon/session').pipe(map((data: any) => data.data)
    );
  }
}

1 Ответ

0 голосов
/ 23 октября 2018

У вас есть два варианта (или больше).Можно было бы использовать средство распознавания маршрута, чтобы разрешить sermon до загрузки компонента.Другой вариант - использовать *ngif для отображения элемента <audio>, только если доступно sermon: 

<audio *ngIf="sermon" #media [vgMedia]="media" preload="auto">
  <source [src]="sermon.fileName" type="audio/mp3">
</audio>
...