2个独立组件之间的通信angularJS 2

Question

我有两个独立的组件内的应用程序组件。第一个是工具栏，另一个是sidenav组件。我想要实现的，我已经做到了(使用反应式x模式)是当从工具栏单击一个按钮时，sidenav在两个状态之间切换(从64px到240px宽度，反之亦然)。

我在一个共享服务中使用了一个通用的行为主体，在单击工具栏按钮时发出数据，在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的状态。