angular - 如何从另一个组件重新加载数据？

Question

页面上放置了两个组件：

<app-actions></app-actions>
<app-events></app-events>

在第一个组件中，我可以添加新事件，如果成功，它会从服务器返回数据。之后，我需要将此数据添加到组件<app-events></app-events>中。

两个组件都使用相同的 EventService 进行 crud 操作。那么，<app-events></app-events>当<app-actions></app-actions>.

我知道，我可以使用输入、输出。

我这样做的好方法：

class EventService {
   private events: any[] = [];
   public constructor(
    private translate: Http
  ) {
        this.events = this.http.loadEvents();
    }

    public getEvents() {
      return this.events;
    }

    public addItemToEvents(event) {
       this.events.push(event);
    }

}

然后在模板中：

<div *ngFor="let i in getEvents()"></div>

你怎么看？

标签： angular

Answer 1

你可以在你的服务中使用 Observable，其中app-events和app-actions组件都订阅。每当您添加一个新事件时，您都可以将新值推送到两个组件都将接收更新值的可观察对象。

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

---

事件服务.ts

export class EventService {

  private eventsData: Events[] = [];
  private eventsSource: BehaviorSubject<any> = new BehaviorSubject<any>(this.eventsData);
  public events: Observable = this.eventsSource.asObservable();

  constructor() { }

  addItemToEvents(event: Event) {
    this.eventsData.push(event);
    this.eventsSource.next(this.eventsData); // sends updated array to subscribers
  }

}

action.component.ts

export class ActionsComponent implements OnInit, OnDestroy {

  private subscription: Subscription;
  public events: Event[];

  constructor(private _eventService: EventService) { }

  ngOnInit() {
    this.subscription = this._eventService.events
      .subscribe(events => this.events = events);
  }

  ngOnDestroy() {
    if(this.subscription) this.subscription.unsubscribe();
  }

}

events.component.ts

export class EventsComponent implements OnInit, OnDestroy {

  private subscription: Subscription;
  public events: Event[];

  constructor(private _eventService: EventService) { }

  ngOnInit() {
    this.subscription = this._eventService.events
      .subscribe(events => this.events = events);
  }

  ngOnDestroy() {
    if(this.subscription) this.subscription.unsubscribe();
  }

}