Question

我是Angular2的新手。我通过官方文档，Mosh稍微过时的udemy课程以及一本名为ng-book2的书来学习我的主要内容。

我有什么 是一个始终存在于（页面顶部）页面的表单。它下面是数据库中的列表。单击列表中的项目会将整个列表替换为该项目的详细信息。单击后退按钮可返回列表。表格仍然排在最前面。它是一个基本的CRUD应用程序。提交表单会将新项目保存到数据库中。

问题当我提交表单时，列表不会自动获取新项目：而是我必须刷新页面。其他操作（upvote，downvote，delete）工作正常。

app.component.html：

<app-article-form [listid]="listid" [formid]="formid"></app-article-form>
<router-outlet></router-outlet>

路由器插座显示项目列表或项目详细信息。

计划架构：我有一个单独的表单组件（ArticleFormComponent），一个单独的组件（ArticlesComponent）和一个单独的组件（ArticleDetailComponent）。路由在ArticlesComponent和ArticleDetailComponent之间。

我基本上希望ArticleFormComponent通知它的兄弟ArticlesComponent已经提交了新文章，我希望ArticlesComponent接收该文章并在Articles []数组中推送（）它。

我google了一下，试图实现发射器服务来广播事件，但问题是我使用路由器插座而不知道如何设置输入属性。有人能引导我朝正确的方向发展吗？感谢。

Answer 1

例如，您可以使用RxJS的ReplySubject类实现PubSub模式。方法如下：

import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';

@Injectable()
export class ArticlesPubSubService extends ReplaySubject<IArticle> {

  constructor() {
    super();
  }

}

然后在两个组件中使用此ArticlesPubSubService：

1）在articles-form.component.ts中，您将发出新创建的文章：

import { Component, OnInit } from '@angular/core';
import { ArticlesPubSubService } from '../articles-pub-sub.service';

@Component({
  selector: 'so-articles-form',
  templateUrl: './articles-form.component.html',
  styleUrls: ['./articles-form.component.css']
})
export class ArticlesFormComponent implements OnInit {

  constructor(private aps: ArticlesPubSubService) { }

  ngOnInit() {
  }

  submit(article) {
    // ... 
    this.aps.next(article);
  }

}

2）在articles.component.ts中，您会收到这篇新文章，并将其推送到您当地的文章列表中：

import { Component, OnInit } from '@angular/core';
import { ArticlesPubSubService } from '../articles-pub-sub.service';

@Component({
  selector: 'so-articles',
  templateUrl: './articles.component.html',
  styleUrls: ['./articles.component.css']
})
export class ArticlesComponent implements OnInit {

  articles: IArticles[];

  constructor(private aps: ArticlesPubSubService) { }

  ngOnInit() {
    this.aps.subscribe( article => this.articles.push(article) );
  }
  ngOnDestroy() {
    this.aps.unsubscribe();
  }
}

Angular2：通过路由器在兄弟组件之间传递数据？

1 个答案: