>

자식 구성 요소가 이벤트를 생성 할 때 부모 구성 요소 내에서 함수를 트리거하고 싶습니다. 자식 구성 요소는 ng-content를 통해 부모에게 전달됩니다. 내가하려는 일의 코드를 단순화했지만 자녀가 부모에게 방출하는 것처럼 보이지 않습니다. 자식 구성 요소는 하나의 특정 구성 요소가 아닌 다양한 구성 요소가 될 수 있기 때문에 ng-content로 자식을 전달하고 싶습니다.

예 :

main.ts

<parent-component>
  <child-component></child-component>
</parent-component>

parent.component.ts

<div>
 {{ this.value }}
 <ng-content (updated)="updateParentValue()"></ng-content> <-- this doesn't work
</div>
updateParentValue(value) {
  this.value = value;
}

child.component.ts

<div>
  <span (click)="updateStuff()">update</span>
</div>
@Output() updated = new EventEmitter();
updateStuff() {
  // Stuff
  this.updated.emit(this.value);
}

  • 답변 # 1

    크림 고마워요, 그 링크로 해결했습니다

    main.ts

    <parent-component>
      <child-component></child-component>
    </parent-component>
    
    

    parent.component.ts

    <div>
     {{ this.value }}
     <ng-content></ng-content>
    </div>
    @ContentChildren(ChildComponent) childComponents: QueryList<ChildComponent>;
    ngAfterViewInit() {
       this.childComponents.forEach((childComponent: ChildComponent) => {
           childComponent.updated.subscribe((item) => this.updateParentValue(item));           
       });
    }
    updateParentValue(value) {
      this.value = value;
    }
    
    

    child.component.ts

    <div>
      <span (click)="updateStuff()">update</span>
    </div>
    @Output() updated = new EventEmitter();
    updateStuff() {
      // Stuff
      this.updated.emit(this.value);
    }
    
    

관련 자료

  • 이전 xml - 작동 할 SQL Server 2016 저장 프로 시저
  • 다음 android - 스키마에 새 열을 추가 할 때 데이터베이스의 버전 번호를 업데이트해야하는 이유는 무엇입니까?