在 Angular 中更快地重新加载组件

Question

我创建了两个 Angular 组件：一个用于创建新帖子，一个用于显示所有帖子。在我按下创建帖子的按钮后，我被重定向到我的 PostList 组件，其中显示了我的所有帖子。我用了window.location.href，这样PostList页面可以自动重新加载，这样新帖子就出现了，不需要手动刷新。问题是它很慢，实际上需要两次刷新，一次在创建帖子时，一次在刷新帖子列表时。有没有更快的方法来导航到帖子列表并显示新帖子而无需手动刷新页面？如果我使用router.navigateByUrl('/posts')，我必须手动刷新页面以显示新帖子，这是不希望的。

export class PostCreateComponent implements OnInit {

  model: any = {};
  @Output() newContent = new EventEmitter();
   
  publishNewPost() {
    this.postService.createPost(this.model).subscribe(newPost => {
      this.model = newPost;
       this.newContent.emit(model);
      this.router.navigateByUrl('/posts');      
    });
}
}

export class PostListComponent implements OnInit {

  posts: Post[];
  pagination: Pagination;
  postParams: PostParams = new PostParams();

  ngOnInit(): void {
    this.loadPosts();
  }

  loadPosts() {
    this.postService.getPosts(this.postParams).subscribe(posts=> {
      this.posts = posts.result;
      this.pagination = posts.pagination;
     });
  }

 addNewContent(content: Post) { this.posts.push(content) }

}

用于创建帖子：

<form #postForm="ngForm" (ngSubmit)="createPost(this.model)" autocomplete="off">
</form>

帖子列表：

<div  class=" container mt-3" >
         <span *ngFor="let post of posts">
             <app-post-card (newContent)="addNewContent($event)" 
                [post]="post" class="item" ></app-post-card>
         </span>
</div>  

邮政服务：

getPosts(postParams: PostParams) {
    var response = this.postCache.get(Object.values(postParams).join('-'));

    if (response) {
      return of(response);
    }

    let params = this.getPaginationHeaders(postParams.pageNumber, postParams.pageSize);

    params = params.append('orderBy', postParams.orderBy);

    return this.getPaginatedResult<Post[]>(this.baseUrl + 'posts', params)
    .pipe(map(response => {
        this.postCache.set(Object.values(postParams).join('-'), response);

        return response;
    }));

  }
createPost(model: any) {
     return this.http.post<Post>(this.baseUrl + 'posts/create', model);
}

Answer 1

您可以创建一个可用于两个组件之间通信的 PostService。 在该服务中，为各种帖子和一个 behaviorSubject (rxjs) 创建一个帖子列表变量，它会在更新时始终发出帖子列表。

创建一个公共方法以在帖子中附加新帖子。 创建一个公共方法，该方法将作为 observable 返回 behaviorSubject。

邮政服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class PostsService {
    private postsList: string[] = [];

    private $posts: BehaviorSubject<string[]> = new BehaviorSubject<string[]>(this.postsList);

    constructor() { }

    public getPostsObservable(): Observable<string[]> {
        return this.$posts.asObservable();
    }

    public addPost(post: string): void {
        this.postsList.push(post);
        this.$posts.next(this.postsList);
    }

}

然后在 AddPost 组件中，订阅上述服务并使用其 addpost 方法。

AddPost 组件：

export class AddPost {

    constructor(private postsService: PostsService) {}

    public addNewPost(post) {
        this.postsService.addPost(post);
    }
}

HTML

<div>
    <input type="text" (change)="addNewPost($event.target.value)">
</div>

ShowPost 组件：

export class ShowPost implements OnInit {

    public postsList: string[] = [];
    
    constructor(private postsService: PostsService) {}
    
    ngOnInit() {
        this.postsService.getPostsObservable().subscribe(postsList => {
            this.postsList = postsList;
        });
    }
}

HTML：

<div>
    <div *ngFor="let post of postsList">
         {{post}}
    </div>
</div>