Question

我在某种程度上努力去掌握这种架构。

我有一个搜索组件，一个表组件，一个表服务。

当我进行搜索时，我会调用rest webservice并获取JSON。我使用tableservice.setData（）;
我转到它工作的表组件页面，我的数据在表格中
我再次搜索，但这次是在表组件页面上（在它初始化之后）并且它没有得到更新，因为它已经实例化，并且它没有再次通过组件构造函数。

我缺少的是一种在数据更改时强制刷新表服务中的表组件的方法。

有没有办法实现这个目标？

tablecomponent.ts

constructor(private service: SmartTableService) {
    console.log("entering constructorSTable")
    const data = this.service.getData();
    this.source.load(data);
}

searchcomponent.ts

constructor(private searchService: NbSearchService,
            private http: HttpClient, 
            private myTableService : SmartTableService ) {}

ngOnInit(): void {
    this.searchService.onSearchSubmit()
            .subscribe((data: { term: string, tag: string }) => {
                 var req = this.http.post('http://...', {
                 ...
    }).subscribe(
        res => {
          var ApiRet = res;
          this.myTableService.setData(ApiRet);
        },
        err => {
          console.log("Error occured");
        }
      );
  });

tableservice只包含数据的setter和getter。

Answer 1

<强> tablecomponent.ts

subscription: Subscription;
constructor(private service: SmartTableService) {
    this.subscription = this.service.getData().subscribe(data => { 
        this.source.load(data);
    });
}

ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
}

<强> table.service.ts

@Injectable()
export class SmartTableService {
    private subject = new Subject<any>();

    updateData(data: any) {
        this.subject.next({ data: data });
    }

    getData(): Observable<any> {
        return this.subject.asObservable();
    }
}

<强> searchcomponent.ts

...
.subscribe(
    res => {
      var ApiRet = res;
      this.myTableService.updateData(ApiRet);
    },
    err => {
      console.log("Error occured");
    }
);
...

Answer 2

我有一个类似的问题并尝试使用此代码

import { ChangeDetectorRef } from '@angular/core';

    constructor(private service: SmartTableService, private ref: ChangeDetectorRef){

        this.subscription = this.service.getData().subscribe(data => { 
           this.source.load(data);
        });

    setInterval(() => {
       this.ref.detectChanges()             
    }, 1000);


   }

它会强制每秒加载一次dom。

来自服务的Angular 5刷新组件

2 个答案: