Angular2로 라우팅 된 구성 요소에 데이터 전달

Question

라우팅을 통해로드 된 구성 요소가 있는데 상위 구성 요소의 구성 요소로 데이터를 전달하려고합니다. 이 일을 어떻게 하죠?

부모 구성 요소 클래스

export class HomeComponent{ 
    userName: string; 
    userId: string; 

    ngOnInit(): void{ 
     this.userName = "user name"; 
     this.userId = "user id"; 
    } 
} 

부모 구성 요소 템플릿

<div> 
    <p>Parent Component</p> 
</div> 
<router-outlet></router-outlet> 

하위 구성 요소 클래스

export class ChildComponent{ 
    userName: string; 
    userId: string; 
} 

기본적으로 홈 구성 요소에는 해당 구성 요소에서만 사용할 수있는 하위 경로가 있습니다. 하위 구성 요소는 상위 구성 요소와 함께 자동으로로드되지만 하위 구성 요소 내부의 상위 구성 요소에서 데이터를 사용하려고합니다. 실용적인 목적을 위해 그리고 내 응용 프로그램이 올바르게 설정되었는지 여부에 대해 질문하지 않는 것은 있습니다.

Answer 1

원하는 경우 라우터를 통해 변수를 전달할 수 있습니다.

const routes = 
[                      
    { path: "child/:customerId", component: ChildComponent },                
] 

그럼 당신은 ActivatedRouteSnapshot

예를 통해 customerId에 액세스 할 수 있습니다.

Answer 2

반응성 데이터가있는 서비스를 제공하는 것이 가장 좋은 방법입니다.