Связь между двумя независимыми компонентами angularJS 2

Question

У меня есть 2 независимых компонента внутри компонента приложения. Первая из них - панель инструментов, а другая - компонент sidenav. То, что я хотел бы достичь, и я сделал это (используя реактивный шаблон x), - это когда кнопка нажата на панели инструментов, sidenav переключает между двумя состояниями (от 64 до 240 пикселей и наоборот).

Я использовал общий объект «Поведение» внутри общей службы, чтобы испускать данные при нажатии кнопки панели инструментов, а абонент внутри компонента sidenav для прослушивания испускаемых данных.

Мой вопрос в том, есть ли способ добиться того же результата с использованием другого подхода (например, @Input или @Output, как указано в официальных документах) или реактивных х шаблонов, идеально подходящих для моих нужд?

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.