드롭 다운이있는 primeng (각도 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>
이 코드에서 버튼은 잘 작동하지만 onShow () ( *ngIfdiv 외부 ) fe는 정의되지 않았다고 알려줍니다 .
내부의 지역 변수에 어떻게 액세스 할 수 *ngIf있습니까?
예, 이것은 진짜 고통입니다. 안타깝게도 * ngIf가 작동하는 방식으로 인해 내부에있는 모든 것을 완전히 캡슐화합니다 (태그 포함).
이것은 ngIf가있는 태그에 또는 내부에 선언 된 모든 것이 ngIf 외부에서 "표시"되지 않음을 의미합니다.
그리고 당신은 ts에 @ViewChild를 넣을 수 없습니다. 처음 실행할 때 그것이 존재하지 않을 수 있기 때문입니다 ... 그래서이 문제에 대한 두 가지 알려진 해결책이 있습니다 ...
a) @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를 setter와 함께 사용할 수 있습니다. ngIf가 변경 될 때마다 setter가 실행됩니다.
(html 템플릿)
<div>{{thing.stuff}}</div>
<my-component #thing></my-component>
(TS 코드)
@ViewChild('thing') set SetThing(e: MyComponent) {
this.thing = e;
}
thing: MyComponent;
이 두 예제 모두 ngIf 외부에서 템플릿에서 사용할 수있는 "thing"변수를 제공해야합니다. 충돌이있는 경우 ts 변수에 템플릿 (#) 변수에 다른 이름을 지정할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다