组件交互 Angular 2

Question

您好，我有两个组件，一个列表组件，一个编辑组件和服务。 我的 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

您已将Svc 添加为EditComponent 的提供者。所以每个编辑组件都有自己的服务实例，这与列表组件使用的不同。

要共享，服务必须由公共父组件或公共父模块提供。

Answer 2

1. 这是一种方法：在父组件中加载服务并与所有子组件共享

父组件

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

1. 另一种方法是在路由模块/或加载所有这些组件的模块中加载服务。 现在不需要在组件中添加providers: [Svc]这一行了。

   从 '../services/mySvc.svc' 导入 { Svc } @NgModule({ ………… 提供者：[Svc] }