Question

我正在尝试优化我的角度应用，并尝试使用ChangeDetectionStrategy.OnPush。

我在服务中从服务器获取数据，并且在未指定ChangeDetectionStrategy时一切正常。

现在看起来像

export class Some{
  public name: string;
}

@Injectable()
export class Service {
  public items: Some[] = [];

  constructor(http: HttpClient) {
      this.getModel();
    }
  getModel{
      this.http.get("some_url").subscribe((result: Some[])=>{
        this.items = result;
      }
    }
}

@Component({
    template: '<ul><li *ngFor="let item of service.items">{{item.name}}</li></ul>',
})
export class Component implements OnInit {        
    constructor(private service: Service) {

    }

    ngOnInit() {
    }
}

如何将服务数据推送到组件？

Answer 1

如果您在组件和服务中使用不同的方法，那就更好了

在您的组件中，项目应该是可观察的

public items: Observable<Some[]>;

在ngOnInit上，您将getItems方法分配给变量项

ngOnInit() {
   this.items = this.service.getItems()
}

和getItems应该看起来像

getItems(): Observable<Some[]> {
  return this.http.get("some_url")
}

您的视图现在将使用异步管道显示数据

<ul><li *ngFor="let item of (items | async)">{{item.name}}</li></ul>

当ChangeDetectionStrategy.OnPush时，如何在角度5中将更改从服务推送到组件

1 个答案: