Question

单击调用下面添加功能的按钮后，数据将添加到数据库中，但不会添加到前端本身。如何在不加载页面的情况下添加它？

addSection(section: Section) {
    section.name = section.name.trim();
    if(section.name != ''){
        this.onToggleDialogBox();
        this.sectionService
            .registerSection(section)
            .subscribe(
                res => alert(res.message),
                error => console.log(error)
        )
    }else{
        alert('Enter name.');
    }
}

如果我使用路由器，这里是必要的代码：

constructor(
        private router: Router,
        private route: ActivatedRoute,
        private sectionService: SectionService
    ) {}

this.router.navigate(['/information/sections']);

Answer 1

有两种方法，一种是将部分添加到服务器，另一种是将部分添加到前端。将该部分成功添加到服务器后，也将其添加到前端。

addSectionToFront(section){ /* TODO: add to front-end */}

addSection(section){
  ...
  this.sectionService.register(section).subscribe(
    // server call succeeded. Now add section locally
    () => this.addSectionToFront(section),
    error => {}
  );
}

Answer 2

尝试使用rxjs的subscription。在服务中执行该方法后，附加.finally。在您的组件中，通过订阅订阅该方法。这样，如果执行该方法，它将在不加载页面的情况下反映在组件上

Angular 2：如何在不加载页面的情况下添加

2 个答案: