각도 2 Child1-Parent-Child2 이벤트 전파

저는 2 주만에 Angular 2에서 작업하기 때문에 친절하게 제발 시도해보고 도움이 될만한 조언을 해 주시겠습니까? 고맙습니다. 나는 주요 구성 요소 (pageComponent)를 가지고 있는데, 그 템플릿 안에는 다른 두 개의 작은 구성 요소 (tableComponent 및 filterComponent)가 있으며 각각은 자체 기능과 속성을 가지고 있습니다. 하위 구성 요소 중 하나에서 생성 된 이벤트를 catch하고 동일한 상위의 다른 하위 구성 요소로 전파하는 방법은 무엇입니까? 즉, 동일한 상위 구성 요소의 템플릿 내에서 두 형제 구성 요소간에 이벤트를 전파하고 전달하는 방법은 무엇입니까?각도 2 Child1-Parent-Child2 이벤트 전파

출처

2017-02-16 Vladimir Despotovic

여기 몇 가지 옵션이 있다고 생각합니다.

첫 번째 하위 구성 요소는 @Ouput 데코레이터를 사용하여 이벤트를 내고 은 해당 이벤트 처리기가 형제에 대한 작업을 호출하도록 할 수 있습니다.

예. 형제 요소

export class TableComponent { 
@Output() anEvent: EventEmitter<any> = new EventEmitter<any>(); 
.. 
} 

export class FilterComponent { 

    callMeWhenSomethingHappens($event){ 
    .. 
    } 
}

이벤트 발행시에 필터 성분을 호출 #theFilter 로컬 변수를 사용하는 부모 구성 요소 템플릿.

<app-filter #theFilter> 
</app-filter> 

<app-table (anEvent)="theFilter.callMeWhenSomethingHappens($event)"> 
</app-table>

(그들은이 router-outlet에 의해 생성되는 경우, 예를 들어) 형제의 구성 요소는 템플릿에 서로에 대한 액세스 권한이없는 경우도 shared service를 사용하여 볼 수 있었다.

출처

2017-02-17 00:30:29

Flux 패턴을 사용할 수 있습니다. 기본적으로 구성 요소에 서비스에서 노출되는 이벤트를 구독하십시오. 서비스는 싱글 톤이기 때문에 구성 요소 트리의 깊이에 상관없이 구성 요소간에 제공되는 데이터를 공유 할 수 있습니다. How can I maintain the state of dialog box with progress all over my Angular 2 application?

출처

2017-02-17 00:33:58 pixelbits

좋아, 나는 두 가지 구성 요소로 전파 할 서비스가 필요하지 않습니다 예를 들면 다음과 같습니다. 한 부모가 동일한 부모 구성 요소 (즉, 부모 구성 요소에 두 개의 삽입 지점이 있고 두 개의 하위 구성 요소가 각 자체 선택기를 사용하여 삽입 됨)에서 다른 구성 요소로 이벤트를 전파해야합니다. –

형제 구성 요소는 서로 직접 이야기하면 안됩니다. 이는 컴포넌트와 그 부모, 컴포넌트와 그 형제 사이의 결합을 생성합니다. 시간이 지나면이 패턴을 유지하기가 어렵습니다. 더 나은 패턴은 데이터를 한 방향으로 전파하는 것입니다 : component -> event -> service -> 가입 된 구성 요소로 전달 – pixelbits

각도 2 Child1-Parent-Child2 이벤트 전파

답변

관련 문제