상위 구성 요소에서 @ViewChildren을 가져올 수 없습니다.

Question

구성 요소의 하위 인스턴스를 제어하려고 시도 중이므로 오류를 지나칠 수 없습니다. 나는 this issue에서 답을 따라 가려고합니다.

상위 구성 요소 Sequence에는 하위 구성 요소 SequenceStep이 들어 있습니다.

ngAfterViewInit() { 
    this.steps.changes.subscribe(steps => { 
     console.log(steps); 
    }); 
} 

내가지고있어 오류는 다음과 같습니다 :

metadata_resolver.js:639 Uncaught Error: Can't construct a query for the property "steps" of "Sequence" since the query selector wasn't defined.

반면 나는 아이들에 대해 뭔가를 시도하고 다음

@ViewChildren(SequenceStep) steps: QueryList<SequenceStep>;

: 부모는 다음과 같은 선언을 포함 Sequence 및 SequenceStep 구성 요소는 자신의 셀렉터가 @Component 데코레이터에 정의되어 있습니다 (sequence 및 sequence-step).

내가 뭘 잘못하고 있니?

Answer 1

는 몇 가지

• 당신이 외부에서 아이들을 전달하는 경우

  있다, 그들은 아이들은 만족하지. @ViewChild()은 구성 요소의 템플리트에 직접 추가 된 하위에 대해서만 작동합니다. 매개자 내용에 대한

  @ContentChildren() 작품 :

  @ContentChildren(TheChild) kids: QueryList<TheChild>; 
  

• this.kids.changes() 만 초기화 후 변화에 대해 알립니다. 따라서 단지 직접 ngAfterViewInit()에 this.kids에 액세스하고 나중에 변경 감지 변경이 발생하는 경우 각도가 좋아하지 않는

  ngAfterViewInit() { 
      this.myKidsCount = this.kids.length; 
      this.cdRef.detectChanges(); 
  
      this.kids.changes.subscribe(kids => { 
       this.myKidsCount = kids.length; 
      }); 
  } 
  

• 을 변경 한 다음에 대한 통지를 얻을 subsribe. ngAfterViewInit()이 변경 감지에 의해 호출 되었기 때문에 this.myKidsCount = this.kids.length에서 예외가 발생합니다.

명시 적 특성 myKidsCount 변경 한 후 나는 변경 감지를 호출 해결하려면 :

constructor(private cdRef:ChangeDetectorRef){} 

ngAfterViewInit() { 
    this.myKidsCount = this.kids.length; 
    this.cdRef.detectChanges(); 
} 

Plunker example

Answer 2

@ViewChildren arg에 따옴표를 추가 했습니까?

@ViewChildren('SequenceStep') steps: QueryList<SequenceStep>;

Answer 3

이 문제는 SequenceStep의 수입과 관련이있을 수 있습니다,의 클래스 이름을 확인 관련 가져 오기 행

Answer 4

@ViewChildren('SequenceStep') steps: QueryList<SequenceStep>;

나를 위해 일했다. 각도 4.X.X 각도 CLI 1.X.X