Question

在Angular 7上，我具有以下组件（为简单起见，省略了一些代码）：

export class CreatePostComponent {

  form: FormGroup;

  onSubmit() {
    this.postService.create(request).subscribe(
      (response) => { this.form.reset();},
      (error) => { }
    );
  }
}

成功提交此表单后，我需要刷新由组件处理的帖子列表：

export class PostListComponent implements OnInit {

  posts$: Observable<PostModel[]>;

  ngOnInit() {

    this.posts$ = this.getPosts();

  }

  private getPosts(): Observable<PostModel[]> {

  }

}

所以基本上我需要再次致电getPosts ...我该怎么做？

Answer 1

不确定两个组件是否都与父子关系相关。如果是这样，这就是我的做法：

    export class CreatePostComponent {
      form: FormGroup;
      public refreshPosts: number;
      onSubmit() {
        this.postService.create(request).subscribe(
          (response) => { 
    this.form.reset();
this.refreshPosts = +new Date();
    },
          (error) => { }
        );
      }
    }

现在，您可以将此refreshPosts属性作为输入绑定属性传递给PostListComponent：

    export class PostListComponent implements OnInit, OnChanges {

@Input() refreshPosts: any
      posts$: Observable<PostModel[]>;

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

  ngOnChanges(changes: SimpleChanges) {
    if (changes.refreshPosts && !changes.refreshPosts.isFirstChange()) {
      this.getPosts();
    }
  }

      private getPosts(): Observable<PostModel[]> {

      }

    }

Answer 2

优良作法是将您的post和getPosts（）函数都转移到postService。无论组件层次结构如何，它都将起作用：

private _posts = new BehaviorSubject<PostModel[]>([]);

getPosts() { 
    return this._posts.asObservable(); 
}

您可以使用单独的函数来获取数据以调用api，然后使用.next()将结果推送到_posts

fetchPosts() {
    // replace with your api, i.e. HttpClient
    someApi.get()
       .then(result => this._posts.next(result))
       .catch(err => { // handle error });
}

您可以根据需要创建任意数量的get()函数，它们将具有相同的数据源：

getRecentPosts() {
    return this._posts.asObservable().pipe(
        filter(post => { // filter logic }),
        map(post => { // map logic })
    )
}

然后在postService.create()函数中，您可以操纵posts数组。在模板中，您使用postService.getPosts()保持最新。

创建项目后刷新列表

2 个答案: