[angular] 부모 구성 요소의 angular2 호출 함수

Program / 글쓴이

파일을 업로드 할 수있는 업로드 구성 요소가있는 앱이 있습니다. 그것은에 포함됩니다 body.component.

업로드 할 BodyComponent.thefunction()때 부모 구성 요소의 함수 (예 :)를 사용해야합니다 ( 데이터 업데이트를위한 호출 수행). 그러나 부모가 구체적으로 body.component. 업로드는 다른 동작으로 다른 곳에서도 사용될 수 있습니다.

같은 것 parent(this).thefunction(), 어떻게할까요?

답변

하위 구성 요소에 사용자 지정 이벤트를 만듭니다. 그런 것 :

@Component({
  selector: 'child-comp',
  (...)
})
export class ChildComponent {
  @Output()
  uploaded = new EventEmitter<string>();

  uploadComplete() {
    this.uploaded.emit('complete');
  }

상위 구성 요소가이 이벤트에 등록 할 수 있습니다.

@Component({
  template `
    <child-comp (uploaded)="someMethod($event)"></child-comp>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  (...)

  someMethod(event) {
  }
}

또 다른 방법은 부모 구성 요소를 자식 구성 요소에 삽입하는 것이지만 서로 강력하게 연결됩니다.

답변

아래는 최근에 나를 위해 일했습니다.

Angular5

class ChildComponent {
  @Output() myEvent = new EventEmitter<string>();

  callParent() {
    this.myEvent.emit('eventDesc');
  }
}

에서 ParentTemplate의 템플릿

<child-component (myEvent)="anyParentMehtod($event)"

답변

관련 이벤트가없는 솔루션.

(원래 부모의 컨텍스트 유지)에 속하는 ChildComponent메서드를 호출하고 싶다고 가정합니다 .myMethod()ParentComponent

상위 구성 요소 클래스 :

@Component({ ... })
export class ParentComponent {

    get myMethodFunc() {
        return this.myMethod.bind(this);
    }

    myMethod() {
         ...
    }
}

상위 템플릿 :

<app-child [myMethod]="myMethodFunc"></app-child>

하위 템플릿

@Component({ ... })
export class ChildComponent {

    @Input() myMethod: Function;

    // here I can use this.myMethod() and it will call ParentComponent's myMethod()
}

답변

부모 구성 요소를 자식 구성 요소에 삽입 할 수 있습니다.

자세한 내용은
– 부모 구성 요소를 자식 구성 요소에 어떻게 주입합니까?를 참조하십시오 .
– 각도이 하위 구성 요소는 상위 구성 요소를 말한다
당신이 보장 할 수 있습니다이 방법은 thefunction()부모가있는 경우에만 호출됩니다 body.component.

constructor(@Host() bodyComp: BodyComponent) {

그렇지 않으면 사용하여 @Output()자식에서 부모로 의사 소통 하는 것이 좋습니다.

답변