어린이가 각도 2의 부모 이벤트를 청취합니다.

Question

각도가있는 문서에는 부모로부터의 아동 사건을 청취하는 주제가 있습니다. 괜찮아. 하지만 내 목적은 그 반대입니다!. 내 애플 리케이션에는 관리자 페이지 (사이드 바 메뉴, 작업 표시 줄, 상태 등 ..)의 레이아웃보기를 보유하고있는 'admin.component'가 있습니다. 이 상위 구성 요소에서 다른 관리자 페이지 간 기본보기를 변경하기 위해 라우터 시스템을 구성했습니다. 문제는 변경 후 항목을 저장하는 것입니다. 사용자가 작업 표시 줄 (admin.component에 있음)의 저장 버튼을 클릭하고 하위 구성 요소가 저장 직원을 수행하기 위해 해당 클릭 이벤트를 청취해야합니다.

Answer 1

나는이 문서가 당신에게 도움이 될 수 있다고 생각 :

• https://angular.io/docs/ts/latest/cookbook/component-communication.html

는 사실은 부모가 자식에 제공하는 AN/관찰 대상을 활용할 수 있습니다. 뭐 그런 :

이

@Component({ 
    (...) 
    template: ` 
    <child [parentSubject]="parentSubject"></child> 
    `, 
    directives: [ ChildComponent ] 
}) 
export class ParentComponent { 
    parentSubject:Subject<any> = new Subject(); 

    notifyChildren() { 
    this.parentSubject.next('some value'); 
    } 
} 

구성 요소가 단순히이 주제에 가입 할 수 있습니다 아이 : 그렇지 않으면

@Component({ 
    (...) 
}) 
export class ChildComponent { 
    @Input() 
    parentSubject:Subject<any>; 

    ngOnInit() { 
    this.parentSubject.subscribe(event => { 
     // called when the notifyChildren method is 
     // called in the parent component 
    }); 
    } 

    ngOnDestroy() { 
    // needed if child gets re-created (eg on some model changes) 
    // note that subsequent subscriptions on the same subject will fail 
    // so the parent has to re-create parentSubject on changes 
    this.parentSubject.unsubscribe(); 
    } 

} 

, 당신은 유사한 방법으로 같은 주제를 포함하는 공유 서비스를 활용할 수 ...

Answer 2

후손을 위해서에 대한보다 일반적인 해결책을 이라고 말하고 싶습니다. 간단히 ViewChild에 대한 참조를 가져 와서 직접 메서드를 호출하십시오.

@Component({ 
    selector: 'app-child' 
}) 
export class ChildComponent { 

    notifyMe() { 
    console.log('Event Fired'); 
    } 
} 

@Component({ 
    selector: 'app-parent', 
    template: `<app-child #child></app-child>` 
}) 
export class ParentComponent { 

    @ViewChild('child') 
    private child: ChildComponent; 

    ngOnInit() { 
    this.child.notifyMe(); 
    } 
} 

Answer 3

질문을 올바르게 이해하면 더 많은 뼈의 접근이 가능할 수도 있습니다. 가정 - A는 상위 구성 요소에

아이 컴퍼넌트에 저장해야하는 데이터입니다 저장 버튼을 한

• 영업 이익은
• 다른 모든 데이터
가해야 할 수도 있습니다 하위 구성 요소 서비스에서 액세스 할 수 있음 상위 구성 요소

<button type="button" (click)="prop1=!prop1">Save Button</button> 
<app-child-component [setProp]='prop1'></app-child-component> 

에서 그리고 아이

..

prop1:boolean; 
    @Input() 
    set setProp(p: boolean) { 
    // -- perform save function here 
} 

이것은 단순히 버튼 클릭을 하위 구성 요소로 보냅니다. 거기에서 자식 구성 요소는 데이터를 독립적으로 저장할 수 있습니다.

EDIT : 부모 템플릿의 데이터도 버튼 클릭과 함께 전달해야하는 경우이 방법으로도 가능합니다. 이 경우 알려 주시면 코드 샘플을 업데이트하겠습니다.