각도 2 - 하위 구성 요소의 콘텐츠 투영에서 콘텐츠 및 이벤트 액세스

Question

나는 angular2에서 사이드 바를 만들고 있습니다.

코드 :

사이드 바 (아이) 구성 요소의 템플릿 :

<div class="sidebar"> 
    <ng-content></ng-content> 
</div> 

부모 구성 요소의 템플릿 :

<app-sidebar> 
    <li> 
    <a data-toggle="collapsible-1">Menu-item</a> 
    <ul id="collapsible-1"> 
     <li>Sub-item 1</li> 
     <li>Sub-item 2</li> 
     <li>Sub-item 3</li> 
    </ul> 
    </li> 
</app-sidebar> 

사이드 바 구성 요소에서, 나는에 기록 된 내용을 투사하고 상위 구성 요소는 <ng-content></ng-content>입니다. 내가 원하는 무엇

는 :

내가 Menu-item 앵커 태그를 클릭, 나는 목록이 전환 (표시 및 축소 같이 사라)하고 싶다.

나는 시도하고 문제가 무엇 :

내가 앵커 태그에 (click) 이벤트를 유지했다. 그러나이 경우 부모 구성 요소에는 자식 app-sidebar 구성 요소가 아니라 알림이 전달됩니다. 재사용 성을 위해 기능을 상위 구성 요소에 넣고 싶지 않습니다. 사용자가 app-sidebar 구성 요소의 앵커 태그를 클릭하면 목록의 표시가 변경되는 것을 어떻게 알 수 있습니까?

사이드 바에 재사용 가능한 축소 가능한 다른 방법이 있습니까? 내 접근 방식이 잘못되었다고 말해줘.

Answer 1

당신은 app-sidebar에 서비스를 제공하고 항목

@Component({ 
    selector: 'app-sidebar', 
    providers: [MyService], 
    template: ` 
    <ng-content></ng-content> 
    `, 
}) 
export class Sidebar { 
} 

에 주입하고, 항목의 구성 요소 또는 부모

@Component({ 
    selector: 'sidebar-item', 
    template: ` 
    <ng-content></ng-content> 
    `, 
}) 
export class SidebarItem { 
    constructor(myService:MyService) { 
    console.log(myService); 
    } 
} 

이 상품은 구성 요소에서이 서비스를 주입 지시문을 만들 수 있습니다 그런 다음 Sidebar 구성 요소에 클릭에 대해 알리고 Sidebar에서 알림을 구독 할 수 있습니다. 예를 들어 선택한 것으로 표시 할 수 있습니다.

Plunker example