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

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

새 Angular 8 보기 자식을 구성하는 방법은 무엇입니까?

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

대

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

어느 것이 더 좋습니까??▁should까합니▁when▁i야▁use해 언제 사용해야 합니까?static:true 대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: falseAngular 9에서 기본 폴백 동작이 됩니다.여기 및 여기에서 더 읽기

그{ static: true }옵션은 내장된 뷰를 즉시 생성할 수 있도록 지원하기 위해 도입되었습니다.하고 때TemplateRef당신은 안에서 그렇게 할 수 없을 것입니다.ngAfterViewInit그것이 원인이 될 것이므로ExpressionHasChangedAfterChecked오류. 정적 플래그를 true로 설정하면 ngOnInit에서 보기가 생성됩니다.

그럼에도 불구하고:

다른 대부분의 경우, 가장 좋은 방법은 다음과 같은 것을 사용하는 것입니다.{static: false}.

주의할 점은 주의해야 .{ static: false }Angular 9에서는 옵션이 기본값으로 설정됩니다.즉, 정적 플래그를 설정할 필요가 없습니다. 그렇지 않으면static: true선택.

cli 진 CLI 할용습니있다수를 할 수 .ng update현재 코드 기반을 자동으로 업그레이드하는 명령입니다.

마이그레이션 가이드 및 이에 대한 자세한 내용은 여기와 여기에서 확인할 수 있습니다.

#정적 쿼리와 동적 쿼리의 차이점은 무엇입니까?@ViewChild() 및 @ContentChild() 쿼리에 대한 정적 옵션은 쿼리 결과를 사용할 수 있는 시기를 결정합니다.

정적 쿼리(static: true)를 사용하면 보기가 생성된 후 변경 탐지가 실행되기 전에 쿼리가 해결됩니다.그러나 ngIf 및 ngFor 블록의 변경과 같은 보기의 변경 사항을 반영하도록 결과가 업데이트되지는 않습니다.

동적 쿼리(static: false)를 사용하는 경우 쿼리는 @ViewChild() 및 @ContentChild()에 대해 각각 ngAfterViewInit() 또는 ngAfterContentInit() 후에 해결됩니다.ngIf 및 ngFor 블록 변경과 같은 보기 변경에 대해 결과가 업데이트됩니다.

---

을 사용하기 위한 사용 static: true를 사용하는 입니다.fromEvent템플릿에 정의된 요소에 바인딩합니다.다음 템플릿을 고려합니다.

<div [ngStyle]="thumbStyle$ | async" #thumb></div>

그런 다음 구독 또는 init 후크를 사용하지 않고도 이 요소에서 이벤트를 처리할 수 있습니다(각 이벤트 바인딩을 사용하지 않거나 사용할 수 없는 경우).

@Component({})
export class ThumbComponent {
  @ViewChild('thumb', { static: true })
  thumb?: ElementRef<HTMLElement>;

  readonly thumbStyle$ = defer(() => fromEvent(this.thumb, 'pointerdown').pipe(
    switchMap((startEvent) => fromEvent(document, 'pointermove', { passive: true })
    // transform to proper positioning
  ));
}

▁to를 하는 것은 합니다.defer이렇게 하면 관찰 가능한 항목이 구독 중일 때만 확인됩니다.이것은 다음 시간 전에 발생할 것입니다.ngAfterViewInit. 이 리거됨, 다과같경이 발생합니다.async파이프가 그것에 가입합니다.는 사하고있때에문을 입니다.static: true,this.thumb이미 채워졌습니다.

경험에 비추어 볼 때 다음을 수행할 수 있습니다.

• { static: true } 를 .ViewChildngOnInit.

• { static: false } 접속할 수 있는 것은 있다니습수할액스세에서만▁be다▁can▁only있▁in니습입니다.ngAfterViewInit이것은 또한 구조적 지침(즉, 구조적 지침)이 있을 때 가고 싶은 것입니다.*ngIf템플릿의 요소에 있습니다.

각진 문서에서

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

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

PS: 새로운 기능이기 때문에 성능에 대한 벤치마크를 실행해야 할 수도 있습니다.

편집

@Massimiliano Sartoretto가 언급했듯이, github commit은 당신에게 더 많은 통찰력을 줄 수 있습니다.

정적 속성은 우리 아이의 가용성에 대해 각진 정보를 알려줍니다.

예를 들어, static이 true로 설정되어 있으면 처음부터 페이지에서 자녀를 사용할 수 있음을 각에 알립니다(*ngIf, 페이지 바인딩에 종속되지 않음을 의미).API 호출 등) 너무 각진 나머지 가장 빠른 라이프사이클 후크(ngOnInit)에서 찾고 다시는 찾지 않습니다.

정적을 거짓으로 설정하는 경우, 우리는 아이가 일부 조건부 지시에 의존한다는 것을 각도에 알립니다. 따라서 각도는 모든 변경 감지 사이클 후에 아이를 찾으려고 시도하고 가능하면 afterViewInit() 수명 주기 후크에서 액세스할 수 있습니다.

Angular 8로 업그레이드한 후 ViewChild가 nullOnInit을 실행하고 있기 때문에 여기에 왔습니다.

정적 쿼리는 ngOnInit 이전에 채워지고 동적 쿼리(static: false)는 이후에 채워집니다.즉, static:false를 설정한 후 뷰 자식이 nullOnInit인 경우 static:true로 변경하거나 ngAfterViewInit로 코드를 이동하는 것을 고려해야 합니다.

https://github.com/angular/angular/blob/master/packages/core/src/view/view.ts#L332-L336 을 참조하십시오.

다른 답변은 정답이며, 이러한 이유를 설명합니다.ngIf 내부의 ViewChild 참조와 같은 구조적 지시어에 의존하는 쿼리는 이 지시어의 조건이 해결된 후, 즉 변경 탐지 후에 실행되어야 합니다.그러나 static: true를 안전하게 사용할 수 있으므로 중첩되지 않은 참조에 대해 ngOnInit 전에 쿼리를 해결합니다.저는 이 특별한 경우를 무효 예외로 언급하는 것이 저에게 그랬던 것처럼 이 특별함을 접하는 첫 번째 방법이 될 수 있습니다.

ng8에서는 상위 구성 요소의 하위 구성 요소에 액세스할 시기를 수동으로 설정할 수 있습니다.static을 true로 설정하면 상위 구성 요소는 다음에서 구성 요소의 정의만 가져옵니다.onInit후크: 예:

 // You got a childComponent which has a ngIf/for tag
ngOnInit(){
  console.log(this.childComponent);
}

ngAfterViewInit(){
  console.log(this.childComponent);
}

static이 false이면 ngAfterViewInit(), ngOnInit()에서만 정의가 정의되지 않습니다.

하위 @token 5+ 토큰 두 인수 보기('로컬 참조 이름', 정적: false|true)

@ViewChild('nameInput', { static: false }) nameInputRef: ElementRef;

참과 거짓의 차이를 알고 싶다면 이것을 확인하세요.

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

하위 보기

템플릿 요소 참조에 사용할 수 있습니다.

...특정 구성요소 참조 이외의 용도로 사용됩니다.

데코레이터 스타일 구문 사용. @ViewChild( selector) reference : ElementRef || QueryList.

특정 구성 요소 또는 요소 참조.

에서 사용AfterViewInIt().

우리는 그것을 사용할 수 있습니다.Oninit().

하지만 이것은 특정한 용도로 사용됩니다.ngAfterViewInit().

마지막으로{static : false}배치되어야 합니다.@ViewChild( Useme , { static : false})템플릿 변수 참조용입니다.

템플릿 파일의 변수는 다음과 같습니다. #Useme.

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