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

Program / 글쓴이

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

답변

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

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

@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
}

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

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

답변

받는 사람들을 위해 Cannot read property 'notifyMe' of undefined

ngAfterViewInit()intead 내부의 메소드를 호출하십시오.ngOnInit()

답변