Обновить список после создания элемента

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

Хорошей практикой будет передача ваших сообщений и функции getPosts () вашему пост-сервису.Это будет работать независимо от иерархии компонентов:

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() вы можете манипулировать вашим массивом сообщений.В своем шаблоне вы используете postService.getPosts(), чтобы оставаться в курсе.

Answer 2

Не уверен, связаны ли оба компонента с родительско-дочерними отношениями.Если это так, то я бы так и сделал:

    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[]> {

      }

    }