0

我的 Angular 4 应用程序中有两个组件，比如 listComponent 和 searchComponent，它们没有任何关系。我想在从 searchComponent 中选择搜索条件时调用 listComponent 中的函数。考虑到性能，哪种方法是最好和最有效的方法？

任何一个：

1）我可以将输出事件传递给root并使用数据服务进行数据更改，即切换组件显示并从公共服务获取数据。在这里，我每次都必须调用 ngAfterViewChecked() 或 ngOnChange() 并使用一些标志来了解从 searchComponent 中选择了新的 Search。

2) 在数据服务中使用 rxjs/behavioralSubject 并从 searchComponent 中设置它并在 listComponent 中订阅它。

4

4 回答 4

1

如果两个组件之间有任何父/子连接，则应使用@Input 和@Output。

所以我会假设列表组件将搜索条件作为输入，一旦选​​择项目，搜索组件就会发出输出事件。

通过这种方式，您可以在 ngOnChanges() 上更新您的列表组件，如果您不想通知列表组件，除非它的输入已更改，请使用 ChangeDetectionStrategy.OnPush。

您提到的第二种方法是在单独的服务中使用 rxjs/behavioralSubject，您可以在其中从搜索组件推送搜索条件并在列表组件上订阅该主题。

如果有更多搜索逻辑，您可以获得在 Angular 上使用服务的好处，并创建处理所有搜索逻辑（包括通知组件）的搜索服务。

于 2017-12-11T08:52:12.280 回答
1

几种解决方案：

1 - 使用服务。它应该包含用于发出事件的主题，或者至少包含用于存储您在两个组件中设置的数据的数据。

2 - 使用父组件的输出/输入。

3 - 使用带有输出的 ViewChild 组件。一旦父组件接收到输出，它就会通过视图子绑定调用子组件中的方法。

于 2017-12-11T08:59:50.933 回答
0

我认为最好的解决方案是使用ngrx。我用了几次，它非常适合这样的问题。

于 2017-12-11T15:33:03.373 回答
0

我通常使用带有主题的服务

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

/**
 * Event Types
 */
export const MyAppEventTypes =
  {
    EventType1: 'EventType1'
//...
  };
/**
 * Events
 */
export class MyAppEvent
{
  type: string;
  data: any;
}

/**
 * Service in charge of broadcasting messages
 */
@Injectable()
export class MessageService
{
  /**
   * Subject to trigger events
   * @type {Subject<MyAppEvent>}
   */
  private myAppEventSubject: Subject<MyAppEvent> = new Subject<MyAppEvent>();

  /**
   * The observable for events
   * @type {"../../Observable".Observable<MyAppEvent>}
   */
  public readonly myAppEvent$: Observable<MyAppEvent> = this.myAppEventSubject.asObservable();


  /**
   * Broadcasts a message
   * @param name
   * @param data
   */
  broadcast(name: string, data)
  {
    this.myAppEventSubject.next(
      {
        type: name,
        data: data
      });
  }
}

然后，在一个需要广播消息的类中，注入服务后

 this.messageService.broadcast(MyAppEventTypes.EventType1, {data: 'test'});

并在需要接收消息的类中，注入服务后

this.messageService.myAppEvent$.subscribe(ev => {
      if (ev.type == MyAppEventTypes.EventType1)
      {
        this.data = ev.data;
      }
    });
于 2017-12-11T09:39:07.530 回答