获取有关组件负载的数据

Question

我有一个组件需要在 component/page 加载时显示网格中的数据，当从父组件单击按钮时，它需要用新数据刷新网格。我的组件如下

export class TjlShipdateFilterComponent implements DoCheck {

  tljShipDate: ShipDateFilterModel[];

  constructor(private psService: ProjectShipmentService) {
  }

 ngDoCheck() {
 // this data is from the service, trying to get it on Page load
  }

@Input() filter: ShipDateFilterModel[];
//Load or refresh the data from parent when the button clicked from parent component 
ngOnChanges(changes: SimpleChanges) {
}

ngOnChanges 工作正常，它从父组件获取数据并在从父组件单击按钮时显示。但是在加载 page/component 网格时它没有显示任何内容，并说 this.psService.tDate; 未定义。

以下是我获得 tDate

的服务

export class ProjectShipmentService {
   ......    
  constructor(service: DataService, private activatedRoute: ActivatedRoute) {
      service.get<ShipDateFilterModel[]>(this.entityUrl).subscribe(x => this.tDate = x);
   }

我不确定我在这里错过了什么。我怎样才能实现这种情况

Answer 1

发生这种情况是因为加载组件时，您的服务中的请求可能尚未完成并且数据可能尚未 return，这就是为什么 tDate 是 undefined，请尝试订阅在你的组件中，也使用 ngOnInit() 而不是 ngDoCheck().

为您服务：

tDate: Observable<ShipDateFilterModel[]>

constructor(service: DataService, private activatedRoute: ActivatedRoute) {
    ...
    this.tDate = service.get<ShipDateFilterModel[]>(this.entityUrl)
}

在你的组件中：

export class TjlShipdateFilterComponent implements OnInit, OnChanges {

  tljShipDate: ShipDateFilterModel[];

  constructor(private psService: ProjectShipmentService) {
  }

  ngOnInit() {
  // this data is from the service, trying to get it on Page load
    this.psService.tDate.subsribe(x => this.tljShipDate = x);
  }

  @Input() filter: ShipDateFilterModel[];
  //Load or refresh the data from parent when the button clicked from parent component 
  ngOnChanges(changes: SimpleChanges) {
  if (changes.filter && changes.filter.currentValue)
   {     
     this.tljShipDate = this.filter;
  }
 }
}

Answer 2

这里有几个选项。 NgOnInit 将运行在创建组件时，在渲染之前。这是在组件初始化时加载数据的最常见方式。如果您甚至在组件初始化之前就需要数据，那么您可能需要使用解析器。这是一个例子：

import { Injectable } from '@angular/core'
import { HttpService } from 'services/http.service'
import { Resolve } from '@angular/router'
import { ActivatedRouteSnapshot } from '@angular/router'

@Injectable()
export class DataResolver implements Resolve<any> { 
    constructor(private http: HttpService) { }
    resolve(route: ActivatedRouteSnapshot) {
        return this.http.getData(route.params.id);
    }
}

然后，在你的路由配置中：

{
    path: 'data/:id',
    component: DataComponent,
    resolve: { data: DataResolver }
}

包含 ActivatedRouteSnapshot 是可选的，只有在使用路由数据（如参数）时才需要它。

编辑：仔细查看您的示例，ngDoCheck 是否可能在 psService 订阅之前触发？

获取有关组件负载的数据

Get data on the Component load

javascript

typescript

angular

angular7