Просмотреть только обновления на странице перезагрузки? - PullRequest
Новая
       5

Просмотреть только обновления на странице перезагрузки?

0 голосов
/ 30 января 2019

Итак, я разрабатываю очень простое CRUD-приложение MEAN-стека, которое позволяет пользователю добавлять, редактировать, удалять сообщения и отображать их на одной странице.В настоящее время я не использую маршрутизацию, и у меня есть два компонента,

1) post-create 2) posts-list

Я использую сервис для передачи данных из post-create в posts-список.

Я понимаю, что компонент posts-list инициализируется изначально при загрузке приложения, которое, очевидно, вызывает ngOnInit () of posts-list, а данные извлекаются с сервера.

Iхотите, чтобы массив «posts» в списке записей обновлялся при нажатии кнопки «Сохранить» в компоненте post-create, что, очевидно, обновит представление компонента posts-list вместо обновления его, когда страницаreloaded и 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 Ответ

0 голосов
/ 30 января 2019

Вам необходимо установить связь между родительским и дочерним компонентами . Один из способов сделать это - использовать eventemitter с декоратором @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);
}
...