어떻게 콘텐츠에 액세스합니까?

Question

ng-content의 내용에 액세스하고 싶습니다. 단지 콘텐츠 요소의 수를 얻기 위해 시작하는 것이지만, 나중에 더 많은 awesomeness를 가지기 위해서입니다. 예를 들어

는 :

@Component({ 
selector: 'my-container', 
template: ` 
    <div class="my-container"> 
     <div class="my-container-nav"><a class="my-container-previous"></a></div> 
     <div class="my-container-body"> 
      <div class="my-container-items"> 
       <ng-content></ng-content> 
      </div> 
     </div> 
     <div class="my-container-nav"><a class="my-container-next"></a></div> 
    </div> 
` 
}) 
export class MyContainer implements AfterContentInit { 
    @ContentChildren(???) containerItems : QueryList<???>; 
    ngAfterContentInit() { 
     console.log('after content init: ' + this.containerItems.length); 
    } 
} 

나는 컨텐츠의 아이의 형태로서 무엇을 넣을까요?

그들은 무엇이든 될 수 있습니다. ElementRef를 시도했지만 작동하지 않았고 항상 0을 기록했습니다. 사용

예 : 나는 '네 콘텐츠 초기화 후'보고 기대

<my-container> 
    <div>some content here</div> 
    <another-component [title]="'another component there'"></another-component> 
    <div>there's lots of content everywhere</div> 
    <span>no assumptions would be fair</span> 
</my-container> 

.

Answer 1

@ContentChildren을 오해했습니다. 모든 내용을 나타내는 것은 아닙니다. 그것은 ng-content의 @Components를 나타냅니다. 아직도 내가 미리 자신의 유형을 모르는 경우 내가 NG-내용 내부 @Components을 획득 얼마나 불분명

:

직접 질문에 대답합니다. 그러나 나는 그것이 바보 같다는 것을 지금 깨닫는다. 나는 그들이 무엇인지 모를 때, 나는 그들과 무엇을 할 것이라고 정확히 생각 하는가?

은 내가하여 elementRef로 그 @ViewChild를 통해 NG-내용과 참조의 부모에 템플릿 변수 (#items)를 도입 할 수 NG-컨텐츠의 모든 내용에 액세스 할 수 :

간접적으로 질문에 대답하려면 . 비슷한 혼란에 직면 다른 사람에 대한

@Component({ 
selector: 'my-container', 
template: ` 
    <div class="my-container"> 
     <div class="my-container-nav"><a class="my-container-previous"></a></div> 
     <div class="my-container-body"> 
      <div #items class="my-container-items"> 
       <ng-content></ng-content> 
      </div> 
     </div> 
     <div class="my-container-nav"><a class="my-container-next"></a></div> 
    </div> 
` 
}) 
export class MyContainer implements OnInit { 
    @ViewChild('items') items: ElementRef; 
    ngOnInit() { 
     console.log('count is: ' + this.items.nativeElement.children.length); 
    } 
} 

, 난 좀 더 @ContentChildren에 확장 할 수 있습니다 : 그런 다음 아이들은 이런 식으로 계산 될 수있다. 나는 2 @Components이 있다고 : 구성 요소 a와 구성 요소 B를하고 난 소비자가 내 구성 요소의 내용 안에이 배치됩니다 것을 알고 : 내 구성 요소에서 다음

<my-component> 
    <component-a></component-a> 
    <div>random html</div> 
    <component-b></component-b> 
    <component-a></component-a> 
</my-component> 

난의 모든 인스턴스에 대한 참조를 aquire 수 있습니다 개별 구성 요소 유형 :

export class MyContainer implements AfterContentInit { 
    @ContentChildren(ComponentA) componentAInstances: QueryList<ComponentA>; 
    @ContentChildren(ComponentB) componentBInstances: QueryList<ComponentB>; 
    ngAfterContentInit() { 
     console.log('count of component A: ' + this.componentAInstances.length); 
     console.log('count of component B: ' + this.componentBInstances.length); 
    } 
} 

그리고 콘솔이 표시됩니다 2 구성 요소 A의 1 구성 요소 B. 있다는 것을

나는이 릴리스 후보에 있음을 지적해야 4.