1

Привет! Есть необходимость перезагрузить представление, после удаления строки в БД. есть компонент:

 import {Component, OnInit} from '@angular/core';
import {SystemService} from '../../shared/services/system.service';
import {Router} from '@angular/router';

@Component({
  selector: 'ad-scripts',
  templateUrl: './scripts.component.html',
  styleUrls: ['./scripts.component.scss']
})
export class ScriptsComponent implements OnInit {

  scripts: ScriptData;
  delete: boolean;

  constructor(
    private systemService: SystemService,
    private router: Router
  ) { }
  ngOnInit() {
    this.systemService.getScript().subscribe((scripts: ScriptData) => {
      this.scripts = scripts['result'];
      console.log(this.scripts);
    });
  }
  deleteForm() {
    this.delete = true;
  }
  deleteScript() {
    // this.systemService.deleteScript().subscribe();
    this.delete = false;
  }
}


export interface ScriptData {
  title: string;
  body: string;
}

В функции deleteScript() необходимо перезагрузить текущее представление, без перезагрузки самой страницы. Знатоки, вопрос: как это сделать?

2 ответа 2

1

Как-то так?

deleteScript() {
  this.systemService.deleteScript().subscribe(() => {
    this.systemService.getScript().subscribe((scripts: ScriptData) => {
      this.scripts = scripts['result'];
      this.delete = false;
    });
  });
}
3
  • Так уже сделал, но вариант не нравится. DRY 6 фев 2018 в 9:41
  • 1
    Для DRY можно вынести вложенную подписку в какой-нибудь this.loadScripts()
    – Qwertiy
    6 фев 2018 в 11:51
  • тогда уж this.systemService.deleteScript().pipe( switchMap(() =>this.systemService.getScript() ) ).subscribe((scripts: ScriptData) => ...)
    – Goodnews
    10 фев 2018 в 10:49
0

Я бы посоветовал ScriptData сделать Subject<ScriptData> или BehaviorSubject<ScriptData>. А метод deleteScript() непосредственно взаимодействовал бы с Subject<ScriptData>. Пример :

readonly scripts$ = new Subject<ScriptData>();

  constructor(private systemService: SystemService) {
  }


  ngOnInit() {
    // ОПЦИОНАЛЬНО
    this.scripts$.subscribe(
      () => doSomthingOnNext(),
      () => doSomthingOnError(),
      () => doSomthingOnComplete(),
    )
  }

  getScript() {
    this.systemService.getScript().subscribe((scripts: ScriptData) => this.scripts$.next(scripts));
  }

  deleteScript() {
    this.systemService.deleteScript().subscribe(() => this.scripts$.next(null) ИЛИ this.scripts$.complete());
  }

Во вью можно привязаться к scripts через asycPipe. Например, обернуть нужную часть контейнером <ng-conteiner *ngIf="scripts$ | async as scripts"></ng-container>. Тогда вью будет само обновляться при изменениях scripts. На самом деле вариантов еще масса есть, этот будут самым простым. Ангуляр пропитан потоками, и лучшее не обновлять полностью вью, а завязывать некоторые элементы на события Observable.

Так же при deleteScript() вы можете комплитеть scripts$.complete() и установить свою логику.

Такого же поведения можно было добиться и без Subject, но как показывает практика на потоках все решается более быстро и эффективно.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.