>

그래서 사용자가 게시물을 추가, 편집, 삭제하고 같은 페이지에 표시 할 수있는 매우 간단한 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);
  });
 }
}


  • 답변 # 1

    부모와 자식 구성 요소를 모두 공유해야합니다.이를 수행하는 한 가지 방법은 @Output 데코레이터와 함께 이벤트 이미 터를 사용하는 것입니다 :

    먼저 자식 컴포넌트 post-create.component.ts 를 편집하십시오  부모 구성 요소에 이벤트를 생성하기 위해 EventEmitter를 추가하는 방법 :

    import { Component, OnInit, EventEmitter, Output } from '@angular/core';
    ...
    export class PostsCreateComponent implements OnInit {
    @Output() emitNewPost = new EventEmitter();    
    ...
    onAddPost() {
      this.postsService.addPost(this.post).subscribe(post => {
        this.post = post;
        // Here we emit the event with your new post
        this.emitNewPost.emit(this.post);
      });
     }
    
    

    그러면 부모 구성 요소 html posts-list.component.html 에서  당신은 HTML에 바인딩, 우리는 emitNewPost 를 사용 유의하십시오  우리의 재산은 @Output 에 의해 정의 된대로  데코레이터 :

       ...
          <mat-expansion-panel *ngFor="let post of posts" (emitNewPost)='addNewPost($event)'>
        ...
    
    
    마지막으로 부모 ts 파일 posts-list.component.ts 에 메소드를 추가하십시오. , 이제 새 게시물이 추가 될 때마다 addNewPost가 트리거됩니다.

    public addNewPost(post) {
      this.posts.push(post);
    }
    
    

  • 이전 android - RecyclerView 어댑터 내에서 한 번에 하나의 ImageView 만 선택
  • 다음 java - 도트 대신 쉼표로 이중 허용