각도 2의 다른 하위 구성 요소에서 하위 구성 요소의 값에 액세스하는 방법

Question

'각도 구성 2 프로젝트 설정이 있습니다.'app 구성 요소 '라는 상위 구성 요소가 있고'상위 구성 요소에는 하위 구성 요소 '라는 하위 구성 요소 2 개가 있습니다. 및 'child2 구성 요소'.

내 프로젝트 구조를 보이는 같은 :

app.component 
    -- child1 component 
    -- child2 component 

이제 내 질문 : 나는 '자식 1 구성 요소'에 버튼이 있고 변수 '자식 2 구성 요소'에서 'variableOfChild2Component이'가있다. 이제 'child1 component 's'버튼을 클릭하면 child2 구성 요소의 변수 값이 변경됩니다. 각도 2에서 어떻게이 요구 사항을 얻을 수 있습니까?

Answer 1

구성 요소 상호 작용의 경우 서비스에 의지하기 위해 서비스의 빠른 이름을 사용하려고하지만 유스 케이스에 의미있는 것을 사용하십시오. 버튼 구성 요소에서 이제

. 
. 
. 
export class Component1 ... { 
    constructor(private myService: MyService) { } 

    buttonClick() { 
    this.myService.setData("Pass anything you want here"); 
    } 
} 

2 개 클래스 구성 요소 1 이제

import { Subject } from 'rxjs'; 

@Injectable() 
export class MyService { 
    private dataMessenger = new Subject<any>(); 

    getData(): Subject<any> { 
    return this.dataMessenger; 
    } 

    setData(newData: any) { 
    this.dataMessenger.next(newData); 
    } 
} 

당신은 예를 들어, 모듈에서 MyService을 등록해야

. 
. 
. 
export class Component2 ... { 
    variableOfChild2Component: any; 

    constructor(private myService: MyService) { } 

    ngOnInit() { 
    this.myService.getData() 
        .subscribe(data => { 
        // data argument contains whatever you pass to MyService.setData() 
        // function inside your Component1 class when the button is clicked 
        this.variableOfChild2Component = data; 
        }); 
    } 
} 

의 AppModule

@NgModule({ 
    . 
    . 
    . 
    providers: [ ..., MyService, ... ] 
}) 
export class AppModule { }