* ngIf 내의 로컬 변수에 액세스

Question

드롭 다운이있는 primeng (angular 2) 대화 상자가 있습니다. 대화 상자가 표시되면 드롭 다운에 포커스를 설정하려고합니다. 문제는 내 div이 조건부로 렌더링된다는 것입니다.

내 코드 : 버튼이 잘 작동이 코드에서

<p-dialog (onShow)="fe.applyFocus()"> 
    <div *ngIf="selectedItem"> 
    <button pButton type="button" (click)="fe.applyFocus()" label="Focus"></button> 
    <p-dropdown #fe id="reason" [options]="reasonSelects" [(ngModel)]="selectedReason" ></p-dropdown> 
    </div> 
</p-dialog> 

만합니다 (*ngIf DIV 외부)에에서 onShow는() 나 fe이 정의되지 말한다.

*ngIf의 로컬 변수에 어떻게 액세스합니까?

Answer 1

네, 정말 고통 스럽습니다. 불행히도, * ngIf 작동 방식으로 인해 내부에있는 태그를 포함하여 모든 것을 완전히 캡슐화합니다.

이것은 ngIf가있는 태그에서 또는 내부에서 선언 된 모든 항목이 ngIf 외부에서 "보이지"않는다는 것을 의미합니다.

그리고 첫 번째 실행에 존재하지 않을 수도 있기 때문에 당신도 단순히 TS에 @ViewChild을 넣을 수 없습니다 ... 그래서이 개 알려진 솔루션은이 문제에있다 ...

가) 당신은 @ViewChildren을 사용할 수 있습니다. 이렇게하면 구독 할 수있는 QueryList가 생기고, tempalte 변수가 변경 될 때마다 (즉, ngIf가 켜지거나 꺼지는 경우) 실행됩니다.

(HTML 템플릿)

<div>{{thing.stuff}}</div> 
<my-component #thing></my-component> 

(TS 코드)

@ViewChildren('thing') thingQ: QueryList<MyComponent>; 
thing: MyComponent; 

ngAfterViewInit() { 
    this.doChanges(); 
    this.thingQ.changes.subscribe(() => { this.doChanges(); }); 
} 

doChanges() { 
    this.thing = this.thingQ.first; 
} 

b) 귀하는 세터와 @ViewChild 사용할 수 있습니다. 이것은 변경 될 때마다 설정기를 시작합니다.

(HTML 템플릿)

<div>{{thing.stuff}}</div> 
<my-component #thing></my-component> 

(TS 코드)

@ViewChild('thing') set SetThing(e: MyComponent) { 
    this.thing = e; 
} 
thing: MyComponent; 

이러한 예는 모두가 ngIf의 외부, 당신이 지금 템플릿에서 사용할 수있는 "일"변수를 제공해야합니다 . ts 변수에 템플릿 변수 (#) 변수에 다른 이름을 지정하여 충돌이 발생할 수 있습니다.