Angular 8에서 @ViewChild에 대한 새로운 정적 옵션을 어떻게 사용해야합니까?

Angular 8에서 @ViewChild에 대한 새로운 정적 옵션을 어떻게 사용해야합니까?

---

새로운 Angular 8 뷰 자식을 어떻게 구성해야합니까?

@ViewChild('searchText', {read: ElementRef, static: false})
public searchTextInput: ElementRef;

vs

@ViewChild('searchText', {read: ElementRef, static: true})
public searchTextInput: ElementRef;

어떤게 더 좋아? 언제 static:truevs를 사용해야 static:false합니까?

---

대부분의 경우 {static: false}. 이렇게 설정하면 바인딩 해결 (구조적 지시문 등 *ngIf, etc...) 에 의존하는 쿼리 일치를 찾을 수 있습니다.

사용 예 static: false:

@Component({
  template: `
    <div *ngIf="showMe" #viewMe>Am I here?</div>
    <button (click)="showMe = !showMe"></button>
  ` 
})
export class ExampleComponent {
  @ViewChild('viewMe', { static: false })
  viewMe?: ElementRef<HTMLElement>; 

  showMe = false;
}

은 static: false더 각도 9. 읽기의 기본 대체 동작 될 것입니다 여기 와 여기에

이 { static: true }옵션은 즉시 내장 된 뷰 생성을 지원하기 위해 도입되었습니다. 뷰를 동적으로 생성하고에 액세스하려는 경우 오류 가 발생 TemplateRef하므로에서 그렇게 할 수 없습니다 . 정적 플래그를 true로 설정하면 ngOnInit에 뷰가 생성됩니다.ngAfterViewInitExpressionHasChangedAfterChecked

그렇지만:

대부분의 다른 경우에 가장 좋은 방법은 {static: false}.

이 { static: false }옵션은 Angular 9에서 기본으로 설정 static: true됩니다. 이는 옵션 을 사용하지 않는 한 더 이상 정적 플래그를 설정할 필요가 없음을 의미합니다 .

angular cli ng update명령을 사용 하여 현재 코드베이스를 자동으로 업그레이드 할 수 있습니다 .

마이그레이션 가이드 및 이에 대한 자세한 정보는 여기 에서 확인할 수 있습니다.

---

따라서 경험적으로 다음을 수행 할 수 있습니다.

• { static: true }당신이 액세스 할 때 요구 설정을 할 수 ViewChild있는가 ngOnInit.

• { static: false }에서만 액세스 할 수 있습니다 ngAfterViewInit. 이것은 또한 *ngIf템플릿의 요소에 구조적 지시문 (예 :)이있을 때 원하는 것입니다 .

---

각도 문서에서

static- 변경 감지가 실행되기 전에 쿼리 결과를 해결할지 여부 (예 : 정적 결과 만 반환). 이 옵션이 제공되지 않으면 컴파일러는 쿼리 결과를 사용하여 쿼리 해결 타이밍을 결정하는 기본 동작으로 돌아갑니다. 쿼리 결과가 중첩 된 뷰 (예 : * ngIf) 내에있는 경우 변경 검색이 실행 된 후 쿼리가 해결됩니다. 그렇지 않으면 변경 감지가 실행되기 전에 해결됩니다.

static:true아이가 어떤 조건에도 의존하지 않는 경우 사용하는 것이 더 좋은 생각 일 수 있습니다 . 요소의 가시성이 변경되면 static:false더 나은 결과를 얻을 수 있습니다.

추신 : 새로운 기능이므로 성능 벤치 마크를 실행해야 할 수도 있습니다.

편집하다

@Massimiliano Sartoretto가 언급했듯이 github 커밋 은 더 많은 통찰력을 제공 할 수 있습니다.

---

Angular 8로 업그레이드 한 후 ngOnInit에서 ViewChild가 null이기 때문에 여기에 왔습니다.

정적 쿼리는 ngOnInit 전에 채워지고 동적 쿼리 (static : false)는 이후에 채워집니다. 즉, static : false를 설정 한 후 ngOnInit에서 viewchild가 이제 null이면 static : true로 변경하거나 코드를 ngAfterViewInit로 이동해야합니다.

참조 https://github.com/angular/angular/blob/master/packages/core/src/view/view.ts#L332-L336를

The other answers are correct and explain why this is the case: Queries dependant on structural directives, e.g. a ViewChild reference inside an ngIf, should run after the conditional of this directive has been resolved, ie after change detection. However, one may safely use static: true and thus resolve the queries before ngOnInit for unnested references. Imho this particular case bears mentioning as a null exception could likely be the first way you'll encounter this particularity, as it was for me.

참고URL : https://stackoverflow.com/questions/56359504/how-should-i-use-the-new-static-option-for-viewchild-in-angular-8