Наблюдаемый вместо функции angular 8 9 - PullRequest
Новая
       123

Наблюдаемый вместо функции angular 8 9

0 голосов
/ 30 апреля 2020

Итак, у меня есть службы, и там у меня есть функции, я хочу использовать наблюдаемые вместо функций classi c. 

  export class VideoServiceService {
  videoList = JSON.parse(localStorage.getItem('videos') || '[]');
  safeURL2: string;
  safeURL: any;

  constructor(public dialog: MatDialog, private sanitizer: DomSanitizer) { }

  getVideos() {
    return this.videoList;
  }

  setVideo(video: object) {
    this.videoList.push(video);
    localStorage.setItem('videos', JSON.stringify(this.videoList));
  }

  deleteVideo(index: number) {
    this.videoList = this.videoList.filter(c => c.ID !== index);
    localStorage.setItem('videos', JSON.stringify(this.videoList));
  }

  getVideo(index: number) {
   return this.videoList.find(c => c.ID === index);
  }

  getURL(data: any) {
    this.safeURL2 = data.replace('https://www.youtube.com/watch?v=', 'https://www.youtube.com/embed/');
    this.safeURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.safeURL2);
    return this.safeURL;
  }

}

У меня есть кнопки других компонентов, которые вызывают функции, например форму для добавления видео удалить список из списка, отредактировать видео из списка и т. д. c. Например: в компоненте списка у меня есть кнопка редактирования, которая вызывает функцию редактирования: 

editDialog(id: number): void {
    const dialogRef = this.dialog.open(AddVideoFormComponent, {data: id} );
    dialogRef.afterClosed().subscribe(data => {
      if (data) {
        this.videoService.deleteVideo(id);
        data.id = this.index++;
        this.videoService.setVideo(data);
        this.dataSource = this.videoService.getVideos();
        this.table.renderRows();
      }
    });
  }

Так что я использую функции classi c здесь. Существует не так много учебников по этому поводу, только для HTTP, но мне это не нужно в этом случае. Мне нужно только использовать observable вместо функции и вызывать ее, а также передавать ID.

1 Ответ

0 голосов
/ 30 апреля 2020

Вы можете эмулировать наблюдаемые функции insted classi c, например: 

import { of } from 'rxjs';
...
getVideo(index: number) {
  return of(this.videoList.find(c => c.ID === index));
}

ИЛИ 

import { Observable} from 'rxjs';
...
getVideo(index: number) {
  return new Observable((o) => {
    o.next(this.videoList.find(c => c.ID === index));
    o.complete();
  });
}
...