組件交互角2

嗨我有兩個組件，一個列表組件，一個編輯組件和服務。我的SVC的部分：組件交互角2

..... 

    // 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 { }

來源

2017-04-01 blackdaemon

這是做這件事的一種方法：在父組件負載服務，並與所有的孩子

父組件

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

兩個子組件

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){} 
}

An另一種方法是在路由模塊/或加載所有這些組件的模塊中加載服務。現在不需要在組件中添加這條線providers: [Svc]。

進口{SVC}從 '../services/mySvc.svc' @NgModule（{ ......... 提供商：[SVC] }

來源

2017-04-01 08:11:44

Vivek沒有涉及的模板 – blackdaemon

是的，我知道，我已添加顯示爲演示。 –

對不起Vivek它不是父子組件的關係 – blackdaemon

您已經添加Svc爲您EditComponent提供商。因此，每個編輯組件都會獲得自己的服務實例，該實例與列表組件使用的實例不同。

要共享，服務必須由共同父組件或共同父模塊提供。

來源

2017-04-01 07:22:47

喔由於JB！我在這兩個之間有任何父組件，我在這種情況下如何實現它？ – blackdaemon

現在在父組件中添加[provider]，但不在子組件中，並通過子組件調用那些子組件 –

無父母Vivek – blackdaemon

組件交互角2

回答

相關問題