Реактивные стилизованные шаблоны с параметризованным асинхронным каналом - PullRequest
Новая
       4

Реактивные стилизованные шаблоны с параметризованным асинхронным каналом

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

Я хотел бы изменить свой код в сторону стиля Reactive, однако я борюсь с синтаксисом при попытке передать параметры внутри асинхронного канала в Observable.

Мой текущий рабочий код, который не является Реактивным (stydent.component.ts): 

deleteStudent(id: number) {
  this.uniCrudService.deleteStudent(id)
  .subscribe( res => {
    console.log(`deleteStudent: ${JSON.stringify(res)}`);
    this.getStudents();
  });
}

В моем шаблоне student.component.html я называю deleteStudent как: 

<a routerLink="" (click)="deleteStudent(student.id)">Delete</a>

Проблема в том, что мне нужно использовать канал async в наблюдаемой функции, которая получает параметр (для стиля Reactive?).

Например: 

deleteStudent(id: number): Observable<Student> {
return this.deleteStudent$ = this.uniCrudService.deleteStudent(id)
  .pipe( tap (res => {
    console.log(`deleteStudent: ${JSON.stringify(res)}`);
    this.getStudents();
  }));

и в шаблоне: 

<a routerLink="" (click)="deleteStudent(student.id) | async">Delete</a>

Однако это выдает ошибку: Cannot have a pipe in an action expression. Глядя на этот ответ Я понимаю, что не могу сделать этот фрагмент моего кода реактивным, и я буду вынужден оставить нежелательный subscription. Это тот случай? Как мне сделать мой deleteStudent реактивным и избавиться от subscription?

1 Ответ

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

Я думаю, у вас есть проблема с дизайном. deleteStudent(id: number) - это обработчик событий, поэтому он не должен возвращать никаких значений или подписчиков. Ваш исходный код правильный.

Если вы хотите более «реактивный» подход, вы можете создать Subject: 

public students$: Subject<any>;

constructor(){ 
   this.students$ = new Subject<any>();
}

ngOnInit() {
   this.students$.subscribe(() => { 
      // do something with students
   });
}

deleteStudent(id: number) {
 this.uniCrudService.deleteStudent(id)
 .subscribe( res => {
   console.log(`deleteStudent: ${JSON.stringify(res)}`);
   this.students$.next();
 });
...