在2組件之間傳遞數據的可觀察/訂閱

我想從組件A（模態窗口）讀取從一組值中選擇的值。一旦在組件A上按下ok按鈕，我希望將值傳遞給組件B（頁面組件）。我有這方面的服務，並遵循這裏指定的示例Delegation: EventEmitter or Observable in Angular2 在2組件之間傳遞數據的可觀察/訂閱

我看到主題更新.next（）。但是從我的用戶，我沒有看到，當我試圖從成分B訪問它的更新值

請幫我看看到底是什麼問題在這裏，

XService.ts

 import { Injectable } from '@angular/core'; 
     import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; 
     import { Observable } from 'rxjs'; 
     import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 

     @Injectable() 
     export class XService { 
      constructor(private modalService: NgbModal) {} 

      // Observable Item source 
      public _adModalSelectedSource = new BehaviorSubject<string>('w'); 

      // Observable Item stream 
      selectedRow$ = this._adModalSelectedSource.asObservable(); 

      // service command 
      changeNav(string) { 
       this._adModalSelectedSource.next(string); 
      } 

     }

元器件A.ts

 btnClick(btn) { 
      if (btn.id === 'ok') { 
       this.XService.changeNav('yes'); 
       this.activeModal.close(this.selectedRows); 
      } else { 
       this.activeModal.dismiss(); 
      } 
     }

ComponentB.ts

import { Component, ViewChild} from '@angular/core'; 
    import { NgbDropdownConfig, NgbTabset } from '@ng-bootstrap/ng-bootstrap'; 
    import { Subscription} from 'rxjs/Subscription'; 

    import { XService} from '../../x/x.service'; 

    import { ActivatedRoute, Params } from '@angular/router'; 

    @Component ({ 
     selector: 'compb', 
     templateUrl: './compb.html', 
     styleUrls: ['./compb.component.scss'], 
     providers: [xService, NgbTabset] 
    }) 

    export class ComponentB { 

     xService: XService; 
     test: any; 
     subscription:Subscription; 
     route: any; 
     tabs: any; 
     subTabs: { all: 'all', problemMachines : 'problem_machines' }; 

     constructor(X:XService, tabs: NgbTabset, route: ActivatedRoute) { 
      this.xModalService = X; 
      this.route = route; 
      this.tabs = tabs; 
      this.subTabs = { all: 'all', problemMachines : 'problem_machines' }; 
     } 

     SelectHandler(data) { 
      if (data.item.id === 'XXX') { 
       this.XService.openModal().then(() => { 
        **console.log('test value'+ this.test);** 
        console.log('close'); 
        //this._loadData(); 
       }); 
      } 
     } 

     ngOnInit() { 
     this.filterText = ''; 
     this.subscription = this.xService.selectedRow$.subscribe(test => this.test = test); 

     } 



     ngOnDestroy() { 
     //on destroy hook 
     this.subscription.unsubscribe(); 
     } 

    }

SelectHandler是模塊（組件A打開）用戶選擇一個值然後需要組件B（頁面）處理的值的按鈕的事件處理程序。

在組件B中，我將訂閱放在onINit（）中，但this.test沒有更改的值。

任何投入，將不勝感激

來源

2017-05-19 looneytunes

我覺得現在的問題是，你有兩個實例Xservice的，一個成分A和一個B組分的，因爲你設置的是在提供財產的組件。你應該做一個模擬包裝這兩個組件，並在那裏設置爲XService的提供者。與此同時，將只有一個XService實例與這兩個組件共享。

模塊應該是這樣的：

@NgModule({ 
imports:   [], 
declarations: [ 
    ComponentA, 
    ComponentB 
], 
entryComponents: [ 
    ComponentA, 
    ComponentB 
], 
providers:  [XService], 
exports:   [] 
} 
)export class MyModule {}

希望這有助於。

來源

2017-05-25 14:23:36

在2組件之間傳遞數據的可觀察/訂閱

回答

相關問題