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

Question

我在 app 组件中有 2 个独立的组件。第一个是工具栏，另一个是 sidenav 组件。我想要实现并且我已经做到了（使用响应式 x 模式）是当从工具栏单击按钮时，sidenav 在两种状态之间切换（从 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 的状态。