主页 / 问题 / 919715
Accepted
Lex
Asked:2020-12-14 03:43:37 +0000 UTC2020-12-14 03:43:37 +0000 UTC

在独立的 Angular2 组件之间传递数据

  • 772

页面上有几个独立的组件。

每个组件由组件中发生的不同事件折叠/扩展。

当单击某个组件时，其他几个组件被关闭/打开时，就会实现该逻辑。

在组件之间传递数据的正确方法是什么？

我通过一个公共服务实现了这一点，在该服务中我存储了组件的布尔变量。来自组件的事件会改变这些变量。我在每个组件中通过 DoCheck 监听数据的变化。这种方法有多正确？

我知道ngrx，但还没有包括在内。

angular2

1 个回答

  1. Best Answer

    最简单的选择之一是通过 RXJS 实现它，正如@overthesanity 所说，它可以通过广播订阅来实现。

    下面是一个小例子。

    假设您有一个AppComponent，其中有一个 Subject 和一个 Observable 需要生成状态。

    class AppComponent {
    private eventSub$ = new Subject<any>();
    public event$ = this.eventSub$.asObservable();

    constructor() {}

    stateOne(state) {
        ... // логика клика на первый компонент
        this.eventSub$.next(state);
    }

    stateTwo(state) {
        ...  // логика клика на второй компонент
      this.eventSub$.next(state);
    }

    stateThree(state) {
        ... /. логика клика на третий компонент
       this.eventSub$.next(state);
    }
}

    还有一个带有组件的模板，它发出一些“事件”并接收 Observable 事件：

    <div>
   <app-template-one [event]="event$" (state)="stateOne($event)"></app-template-one>
   <app-template-two [event]="event$" (state)="stateTwo($event)"></app-template-two>
   <app-template-three [event]="event$" (state)="stateThree($event)"></app-template-three>
</div>

    内部组件将订阅状态。

    class AppTemplateOneComponent implements OnInit, OnDestroy {
  @Input() set event(event$) {
     this.event$ = event$;
  } 
  @Output() state = new EventEmmiter();
  public event$: Observable<any>;

  public isShowBlock = true;

  private destroy$ = new Subject();

  ngOnInit() {
    this.event$.pipe(

      filter(res => res === 'state1'),
      takeUntil(this.destroy$)
    ).subscribe(res => this.isShowBlock = res)
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.complete();
  }

  onClick() {
    this.state.emit('state1');
  } 
}

    好吧，您可以使用 isShowBlock 变量打开/关闭块。

    在上述方式中，AppComponent 是其内部其他组件之间的中介。

    • 1

相关问题