初始化 Angular 组件上的变量答案

【问题标题】：Initialize variables on an Angular component初始化 Angular 组件上的变量
【发布时间】：2019-06-02 03:49:01
【问题描述】：

在 Angular 7 组件上，我有以下内容：

export class PostListComponent implements OnInit {

  posts: PostModel[] = [];

  constructor(private postService: PostService) { }

  ngOnInit() {

    this.posts = this.getPosts();

  }

  getPosts(): PostModel[] {

    let posts: PostModel[] = [];

    posts = postService.getTopPosts();

    return posts;

  }

}

我应该在 getPosts() 方法中设置 this.posts 吗？

或者我应该像我一样返回帖子并在 ngOnInit 中设置 this.posts 吗？

有没有更好的方法来初始化 Angular 组件上的变量？

【问题讨论】：

就我个人而言，我会退回该帖子，因为这将使您的功能保持纯净。不过这只是个人喜好。如果该方法在类上设置值，我将使用 setPosts 命名约定而不是 getPosts。
Miguel，理想情况下“服务返回 observables，组件订阅 observables”。好吧，有两种方法可以显示来自服务的数据。一个是在 *ngFor 中显示一个数组：...
，另一个是使用管道异步显示一个 observable ..
.

标签： angular angular6 angular-components angular7

【解决方案1】：

这样更好看：

export class PostListComponent implements OnInit {

  posts: PostModel[] = [];

  constructor(private postService: PostService) { }

  ngOnInit() {
    this.posts = this.getPosts();
  }

  getPosts(): PostModel[] {
    return this.postService.getTopPosts();
  }

}

我个人也是这样做的，在一个大项目中，当你有数千行代码时，它有助于清理正在发生的事情。

【讨论】：