angular - 페이지 다시로드시 업데이트 만 보시겠습니까?

그래서 사용자가 게시물을 추가, 편집, 삭제하고 같은 페이지에 표시 할 수있는 매우 간단한 MEAN 스택 CRUD 앱을 개발 중입니다. 현재 라우팅을 사용하고 있지 않으며 두 가지 구성 요소가 있습니다.

1) 사후 생성 2) 게시물 목록

서비스를 사용하여 post-create에서 posts-list로 데이터를 전달하고 있습니다.

게시물 목록 구성 요소는 앱이로드 될 때 초기에 초기화되어 게시물 목록의 ngOnInit ()을 호출하고 데이터가 서버에서 가져옵니다.

포스트 생성 구성 요소에서 '저장'버튼을 클릭하면 게시물 목록 구성 요소의보기가 업데이트되는 대신 게시물 목록의 '포스트'배열이 업데이트되기를 원합니다. 페이지가 다시로드되고 ngOnInit ()가 다시 호출 될 때

페이지를 다시로드하지 않고 업데이트 된 데이터를 얻는 방법을 알 수 없습니다. 감사합니다

서비스 :

post.service.ts

import { Post } from './posts.interface';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class PostsService {
  uri = 'http://localhost:3000/api/posts';
  constructor(private http: HttpClient) {}
  getPosts(): Observable<Post[]> {
  return this.http.get<Post[]>(`${this.uri}`);
  }
  addPost(post: Post): Observable<Post> {
  return this.http.post<Post>(`${this.uri}`, post);
  }

post-create.component.html

<mat-card>
  <form>
    <mat-form-field>
     <input matInput type="text" name="title" minlength="3"
     [(ngModel)]="post.title" placeholder="Post Title">
    </mat-form-field>
   <mat-form-field>
    <textarea matInput rows="4" name="content" 
    [(ngModel)]="post.content"
    placeholder="Post Content">
    </textarea>
   </mat-form-field>
   <button mat-raised-button color="primary" class="save-btn" 
   (click)="onAddPost()">Save Post</button>
 </form>
</mat-card>

post-create.component.ts

import { Component, OnInit } from '@angular/core';
import { Post } from '../posts.interface';
import { PostsService } from '../posts.service';
@Component({
selector: 'app-posts-create',
templateUrl: './posts-create.component.html',
styleUrls: ['./posts-create.component.css']
})
export class PostsCreateComponent implements OnInit {
post: Post = {} as Post;
constructor(public postsService: PostsService) { }
ngOnInit() {
}
  onAddPost() {
  this.postsService.addPost(this.post).subscribe(post => {
  this.post = post;
  });
 }
}

posts-list.component.html

<mat-accordion multi="true">
  <mat-expansion-panel *ngFor="let post of posts">
    <mat-expansion-panel-header>{{post.title}}
    </mat-expansion-panel-header>
    <p>{{post.content}}</p>
  <mat-action-row>
   <button mat-button color="primary">EDIT</button>
   <button mat-button color="warn">DELETE</button>
  </mat-action-row>
 </mat-expansion-panel>
</mat-accordion>

posts-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Post } from '../posts.interface';
import { PostsService } from '../posts.service';
@Component({
selector: 'app-posts-list',
templateUrl: './posts-list.component.html',
styleUrls: ['./posts-list.component.css']
})
export class PostsListComponent implements OnInit {
  posts: Post[];
  constructor(public postsService: PostsService) {}
  ngOnInit() {
  this.getAllPosts();
  }
  getAllPosts() {
  this.postsService.getPosts().subscribe((posts: Post[]) => {
    this.posts = posts;
    console.log(this.posts);
  });
 }
}