时间戳

首页 > 解决方案 > 仅查看页面重新加载时的更新？

angular - 仅查看页面重新加载时的更新？

问题描述

所以，我正在开发一个非常简单的 MEAN stack CRUD 应用程序，它允许用户添加、编辑、删除帖子并将它们显示在同一页面上。我目前没有使用路由，并且有两个组件，

1) 后期创建 2) 帖子列表

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

据我所知，post-list 组件是在加载应用程序时初始化的，这显然调用了 post-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>

创建后.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;
  });
 }
}

帖子列表.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>

帖子列表.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);
  });
 }
}

标签： angularrxjsobservable

解决方案

您需要在父组件和子组件之间进行通信，一种方法是将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);
  });
 }

posts-list.component.html然后在你绑定的父组件 html中，注意我们使用emitNewPostas 是我们由@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);
}

推荐阅读