Question

我目前有以下组件树

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

我的底栏组件会在 content-area 组件溢出并显示滚动条时更改其行为。我目前在 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);
 }
}

Answer 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 => {
      (...)
    });
}

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

1 个答案: