组件交互角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

回答

相关问题