2つの独立したコンポーネント間の通信angularJS 2

Question

私は2つの独立したコンポーネントをappコンポーネント内に持っています。最初のものはツールバーで、もう1つはsidenavコンポーネントです。私が達成したいと思っているのは、（リアクティブxパターンを使用して）ボタンをツールバーからクリックしたとき、sidenavが2つの状態（64pxから240px幅、またはその逆）を切り替えるときです。

共有サービス内の一般的なBehaviorサブジェクトを使用して、ツールバーボタンがクリックされたときのデータと、sidenavコンポーネント内のサブスクライバが送信されたデータを受信するときのデータを送信しました。

別のアプローチ（公式ドキュメントに記載されているように@Inputや@Outputなど）や反応性の高いxパターンフィードを使用して同じ結果を達成する方法があるかどうかです。

app.module.ts

@NgModule({ 
declarations: [ 
    AppComponent, 
    DashboardComponent, 
    LoginComponent, 
    FirmsComponent, 
    SidenavComponent, //sidenav component being injected 
    ToolbarComponent // toolbar component being injected 
], 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    JsonpModule, 
    AppRoutingModule, 
    MaterialModule.forRoot(), 
    FlexLayoutModule.forRoot() 
], 
bootstrap: [AppComponent] 

}) 
export class AppModule { } 

app.component.html

<div fxLayout="column" fxFill> 
    <toolbar></toolbar> 
    <div fxLayout="row" fxFill> 
     <sidenav></sidenav> 
     <div fxFlex> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
</div> 

toolbar.component.ts

@Component({ 
selector: 'toolbar', 
templateUrl: './toolbar.component.html', 
}) 

export class ToolbarComponent implements OnInit, OnDestroy{ 
showNavBar: boolean = false; 

constructor(private globalEventsManager: GlobalEventsManager) {} 

ngOnInit(): void { 
    this.initializeToolbar(); 
} 

ngOnDestroy(): void { 
    // this.globalEventsManager.globalEventsEmitter().unsubscribe(); 
} 

initializeToolbar() { 
    this.globalEventsManager.globalEventsEmitter() 
     .filter(params => params.action === 'handleItemVbl') 
     .subscribe(params => { 
      (params !== null) && (this.showNavBar = params.show); 
    }); 
} 
//emit data when button is clicked 
toggleSidenav() { 
    this.globalEventsManager.emitEvent({ action: 'toggleSidenav' }); 
} 
} 

sidenav.component.ts

@Component({ 
selector: 'sidenav', 
templateUrl: './sidenav.component.html', 
}) 
export class SidenavComponent implements OnInit, OnDestroy{ 
showNavBar: boolean = false; 
isHovered: boolean = false; 
toggled: boolean = false; 

constructor(private globalEventsManager: GlobalEventsManager) {} 

ngOnInit(): void { 
    this.initializeSidenav(); 
} 

ngOnDestroy() { 
    // this.globalEventsManager.globalEventsEmitter().unsubscribe(); 
} 

initializeSidenav() { 
    this.globalEventsManager.globalEventsEmitter() 
      .filter(params => params.action === 'handleItemVbl') 
      .subscribe(params => { 
       (params !== null) && (this.showNavBar = params.show); 

    }); 
    //sidenav component is listening for data emittions 
    this.globalEventsManager.globalEventsEmitter() 
     .filter(params => params.action === 'toggleSidenav') 
     .subscribe(params => { 
      if (params !== null) !this.toggled ? this.toggled = true : this.toggled = false; 
    }); 
} 

onHover() { 
    this.isHovered = true; 
} 

onLeave() { 
    // !this.exp && (this.isHovered = false); 
    this.isHovered = false 
} 
} 

sharedservice.ts

export class GlobalEventsManager { 

private _globalBehaviorSubj: BehaviorSubject<any> = new BehaviorSubject<any>({}); 

constructor() {} 

emitEvent(params) { 
    this._globalBehaviorSubj.next(params); 
} 

globalEventsEmitter(): Observable<any> { 
    return this._globalBehaviorSubj.asObservable(); 
} 
} 

Answer 1

はい、AppComponentはsidenav状態を含み、SidenavComponentにそれを渡す必要があります。 ToolbarComponentボタンをクリックするとイベントが発生するので、AppComponentはsidenavの状態を変更できます。