主页 / 问题 / 780957
Accepted
Konstantin Fedorov
Asked:2020-02-06 16:55:56 +0800 CST2020-02-06 16:55:56 +0800 CST

更新当前页面 Angular 5

  • 772

你好！删除数据库中的一行后需要重新加载视图。有一个组件：

 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()中，您需要重新加载当前视图，而不需要重新加载页面本身。行家，问题是：怎么办？

angular5

2 个回答

  1. Best Answer

    像这样的东西？

    deleteScript() {
  this.systemService.deleteScript().subscribe(() => {
    this.systemService.getScript().subscribe((scripts: ScriptData) => {
      this.scripts = scripts['result'];
      this.delete = false;
    });
  });
}
    • 1

  2. 我会建议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>。然后，当脚本更改时，视图将自行更新。其实还是有很多选择的，这个会是最简单的。Angular 被流饱和了，最好不要完全更新视图，而是将一些元素绑定到 Observable 事件。

    您deleteScript()还可以完成 scripts$.complete() 并设置自己的逻辑。

    如果没有 ，也可以实现相同的行为Subject，但正如线程上的实践所示，一切都可以更快更有效地解决。

    • 0

相关问题