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

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

父组件

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

另一种方法是在路径模块/或加载所有这些组件的模块中加载服务。现在无需在组件中添加此行providers: [Svc]。

从＆＃39; ../ services / mySvc.svc＆＃39;导入{Svc} @NgModule（{ ......... 提供者：[Svc] }

组件交互角度2

2 个答案: