Question

因此，我正在开发一个非常简单的MEAN stack CRUD应用程序，该应用程序使用户可以添加，编辑，删除帖子并将其显示在同一页面上。我目前不使用路由，它有两个组成部分，

1）创建后 2）帖子列表

我正在使用一项服务，将数据从创建后传递到帖子列表。

我了解到，在加载应用程序后，posts-list组件会被初始化，这显然会调用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);
  });
 }
}

Answer 1

您需要comunicate between both parent and child components，要做到这一点的一种方式是使用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);
}

仅在页面重新加载时查看更新？

1 个答案: