각도 2가 구성 요소에서 서비스로 데이터를 전송합니다.

Question

목표는 앵귤러 구성 요소의 데이터를 서비스로 보내고 서비스 방법을 사용하여 작업하는 것입니다. 예 :

export class SomeComponent { 
    public data: Array<any> = MyData; 
    public constructor(private myService: MyService) { 
     this.myService.data = this.data; 
    } 
} 

및 서비스 :

@Injectable() 
export class TablePageService { 
    public data: Array<any>; 
    constructor() { 
     console.log(this.data); 
     // undefined 
    } 
} 

얻기 데이터는 정의되지 않습니다. 어떻게 작동 시키는가?

Answer 1

서비스 구성 요소 간의 상호 작용을 할 수있는 경우의 예 :

서비스 :

@Injectable() 
export class MyService { 
    myMethod$: Observable<any>; 
    private myMethodSubject = new Subject<any>(); 

    constructor() { 
     this.myMethod$ = this.myMethodSubject.asObservable(); 
    } 

    myMethod(data) { 
     console.log(data); // I have data! Let's return it so subscribers can use it! 
     // we can do stuff with data if we want 
     this.myMethodSubject.next(data); 
    } 
} 

컴포넌트 1 (송신기)

export class SomeComponent { 
    public data: Array<any> = MyData; 

    public constructor(private myService: MyService) { 
     this.myService.myMethod(this.data); 
    } 
} 

컴포넌트 2 (수신기) :

export class SomeComponent2 { 
    public data: Array<any> = MyData; 

    public constructor(private myService: MyService) { 
     this.myService.myMethod$.subscribe((data) => { 
       this.data = data; // And he have data here too! 
      } 
     ); 
    } 
} 

설명 :

MyService는 data을 관리하고 있습니다. 원하는 경우 data을 사용하여 계속 할 수 있지만 그 값을 Component2으로 두는 것이 좋습니다.

기본적 MyService는 Component1에서 data를 수신하고, 상기 방법 myMethod()에 가입 누구에게 보낸다.

Component1은 data을 MyService으로 보내고 그게 전부입니다. Component2은 myMethod()에 가입되어 있으므로 myMethod()이 호출 될 때마다 Component2은 (는) myMethod()이 (가) 무엇이든 수신하고 수신합니다.