Question

我在app组件中有2个独立组件。第一个是工具栏，另一个是sidenav组件。我想要实现的目标（使用反应式x模式）是从工具栏单击按钮时，sidenav在2个状态之间切换（从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的状态。

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

1 个答案: