Angular 2 - 将一个组件传递给另一个组件答案

【问题标题】：Angular 2 - Pass one component to another componentAngular 2 - 将一个组件传递给另一个组件
【发布时间】：2016-03-27 11:28:13
【问题描述】：

我目前有以下组件树，

app.component
 |-> top-bar.component
 |-> menu-bar.component
 |-> bottom-bar.component
 |-> content-area.component

如果 content-area 组件溢出并显示滚动条，我的 bottom-bar 组件会更改其行为。我目前在 bottom-bar 中使用 jQuery 来查找 content-area 组件并检查是否显示滚动条。但是，为了避免这种紧密耦合，我更愿意将 content-area 组件（或其接口）注入到 bottom-bar 组件中，以便我不必依赖具有 CSS 类的特定 DIV。

实现这一目标的最佳方法是什么？

[编辑]

我已经尝试了下面的示例，这是我想要实现的目标（contentarea 已经在我的@Component 输入数组中），

export class BottomBarComponent implements AfterViewInit {
constructor(private el:ElementRef, private contentarea:ContentAreaComponent
{
 }

 ngAfterViewInit() {
   console.log(this.contentarea);
   var gilCounter = jQuery(this.el.nativeElement).find('.gilcounter');
   var contentArea =jQuery(this.contentarea.nativeElement);
   var lastHasScrollBar = false;
   setInterval(function() {
     var currentHasScrollBar = contentArea.hasScrollBar();
     if (currentHasScrollBar != lastHasScrollBar) {
       if (currentHasScrollBar) {
         gilCounter.css('right', scrollbarWidth + 'px');
       } else {
         gilCounter.css('right', '0px');
       }

       lastHasScrollBar = currentHasScrollBar;
     }
   }, 300);
 }
}

【问题讨论】：

对于您的情况，您应该使用bidirectional service

标签： jquery angular

【解决方案1】：

您将无法将内容组件注入底部，因为它们没有父/子关系。

为了能够交换行为、属性和事件，您需要利用共享服务。这样两个组件就可以一起通信了。

在引导您的应用程序时需要配置共享服务。这样，同一个实例将在整个应用程序中使用。

bootstrap(AppComponent, [ SharedService ]);

例如，服务可以处理状态属性：

export class SharedService {
  state:string;
  stateObservable:Observable<string>;

  constructor() {
    this.stateObservable = Observable.create(observer => this.stateObserver = observer).share();
   }

   updateState(newState) {
     this.state = newState;
     this.stateObserver.next(newState);
   }
 }

然后可以将该服务注入到您的组件中。第一个可以这样更新 state 属性：

export class ContentComponent {
  constructor(private service:SharedService)
    this.service.updateState('new state');
  }
}

第二个通知此更新：

export class BottomComponent {
  constructor(private service:SharedService)
    this.service.stateObservable.subscribe(state => {
      (...)
    });
}

【讨论】：