在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组件之间传递数据的可观察/订阅

回答

相关问题