구성 요소 상호 작용 각도 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에 column 값과 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을 추가했습니다. 따라서 각 편집 구성 요소는 목록 구성 요소에서 사용하는 서비스 인스턴스와 다른 자체 서비스 인스턴스를 가져옵니다.

공유하려면 서비스는 공용 상위 구성 요소 나 공통 상위 모듈에서 제공해야합니다.