コンポーネントの相互作用角2

Question

こんにちは、私は2つのコンポーネント、リストコンポーネント、および編集コンポーネントとサービスを持っています。私のSVC 一部：

..... 

    // Observable string sources 
    private _updatedArray = new Subject<string>(); 

     // Service message commands 
    setColDefs(columns: any) { 
     this._updatedArray.next(columns); 
     console.log(columns); 
    } 

getColDef(): Observable<any> { 
    return this._updatedArray.asObservable(); 
} 

とその作業完璧ここまでは、以下のように

import { Svc } from '../services/mySvc.svc' 

..... 

this._listCompSvc.setColDefs(columns); 

を私のリストの私のサービスを呼び出しています。私は列の値と私のsvcに私が望む列を示すconsole.logを設定します。値を取得しているとき（編集中）は、編集コンポーネントに問題があります。私の編集コンポーネントのコード：

import { Svc } from '../services/mySvc.svc'; 
.. 

export class EditComponent implements OnInit{ 
    private _colDefs: any; 
    constructor(
     private _editCompSvc: Svc 
     ){} 

    ngOnInit() { 
     this._editCompSvc.getColDef().subscribe(
      columns => { 
       console.log(columns); 
     }); 
    } 

....

しかし、どういうわけか、編集中の私にconsole.logは、任意のデータを表示しません。私はここで私のリストのコンポーネントに設定された私の列の値を返すしたい。どんなアイデアみたいな？前もって感謝します。

モジュール：

import { NgModule } from '@angular/core'; 
import { routing } from './routes/myroute.route'; 
import { Svc } from './services/mySvc.svc' 

import { ListComponent } from './actions/list.comp'; 
import { EditComponent } from './actions/edit.comp'; 

@NgModule({ 
    imports: 
    [ 
     routing 
    ], 

    declarations: 
    [ 
     ListComponent, 
     EditComponent 
    ], 

    providers: 
    [Svc] 
}) 

export class Module { } 

Answer 1

1. これはそれを行うための一つの方法です：親コンポーネントの負荷のサービスを、すべての子、子コンポーネント

   import { Svc } from '../services/mySvc.svc' 
   @Component({ 
   selector: 'child1', 
   ...... 
   }) 
   export class Child1Component implements OnInit { 
   constructor(private _editCompSvc: Svc){} 
   } 
   
   import { Svc } from '../services/mySvc.svc' 
   @Component({ 
   selector: 'child1', 
   ...... 
   }) 
   export class Child2Component implements OnInit { 
   constructor(private _editCompSvc: Svc){} 
   } 
   

   の両方で

親コンポーネント

import { Svc } from '../services/mySvc.svc' 
@Component({ 
....... 
    providers: [Svc] 
    template:`<child1></child1> 
       <child2></child2>` 
}) 
export class TerminalComponent implements OnInit { 

とそれを共有します

2. 他の方法は、これらのコンポーネントがすべてロードされているルートモジュール/またはモジュールにサービスをロードすることです。 この行をコンポーネントに追加する必要はありません。providers: [Svc]

   '../services/mySvc.svc' @NgModuleから

   インポート{Svcに}（{ .........プロバイダ：[Svcに]

   }

Answer 2

あなたのEditComponentのプロバイダとしてSvc追加されました。したがって、各編集コンポーネントは、サービスの独自のインスタンスを取得します。これは、リストコンポーネントによって使用されるものとは異なります。

サービスを共有するには、共通の親コンポーネントまたは共通の親モジュールによってサービスを提供する必要があります。