자식은 Angular 2에서 부모 이벤트를 수신합니다.

자식은 Angular 2에서 부모 이벤트를 수신합니다.

---

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

---

이 문서가 도움이 될 것이라고 생각합니다.

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

사실 부모가 자식에게 제공하는 관찰 가능 / 주제를 활용할 수 있습니다. 그런 것 :

@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();
  }

}

그렇지 않으면 유사한 방식으로 이러한 주제를 포함하는 공유 서비스를 활용할 수 있습니다.

---

후손을 위해 좀 더 일반적인 해결책을 언급하겠다고 생각 했습니다. 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();
  }
}

---

질문을 올바르게 이해하면 더 많은 뼈대 접근이 가능할 수 있습니다. 가정-

• OP에는 상위 구성 요소에 저장 버튼이 있습니다.
• 저장해야하는 데이터는 하위 구성 요소에 있습니다.
• 하위 구성 요소에 필요할 수있는 다른 모든 데이터는 서비스에서 액세스 할 수 있습니다.

부모 구성 요소에서

<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: if data from the parent template also needs to be passed along with the button click, that is also possible with this approach. Let me know if that is the case and I will update the code samples.

참고URL : https://stackoverflow.com/questions/37677122/child-listens-for-parent-event-in-angular-2