2個獨立組件之間的通信angularJS 2

我有2個獨立的組件內的應用程序組件。第一個是工具欄，另一個是sidenav組件。我想要實現的功能和我已經完成的功能（使用reactive x pattern）是當從工具欄中單擊按鈕時，sidenav在2個狀態（從64px到240px寬度，反之亦然）之間切換。2個獨立組件之間的通信angularJS 2

我已經在共享服務中使用了一個通用行爲主題，以便在單擊工具欄按鈕時發出數據，並使用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(); 
} 
}

來源

2017-02-04 tsiro

有沒有這樣的事情angularJS 2. Angular和AngularJS是不同的框架，A2的問題不應該有angularjs標籤。 – estus

是，AppComponent應該包含sidenav狀態，並把它傳遞到SidenavComponent。 ToolbarComponent應點擊按鈕時發出事件，因此AppComponent可以更改sidenav的狀態。

來源

2017-02-04 11:38:43

可否請您在代碼中提供更多詳細信息？ – tsiro

2個獨立組件之間的通信angularJS 2

回答

相關問題