问题
在模板中显示相应的元素后获得@ViewChild的最优雅的方式是什么?
下面是一个例子。也可提供活塞。
Component.template.html:
<div id="layout" *ngIf="display">
<div #contentPlaceholder></div>
</div>
Component.component.ts:
export class AppComponent {
display = false;
@ViewChild('contentPlaceholder', { read: ViewContainerRef }) viewContainerRef;
show() {
this.display = true;
console.log(this.viewContainerRef); // undefined
setTimeout(() => {
console.log(this.viewContainerRef); // OK
}, 1);
}
}
我有一个默认隐藏其内容的组件。当有人调用show()方法时，它变得可见。然而，在Angular 2变更检测完成之前，我不能引用viewContainerRef。如上所示，我通常将所有必需的操作包装到setTimeout(()=>{}，1)中。有没有更正确的方法?
我知道ngAfterViewChecked有一个选项，但它会导致太多无用的调用。
答案(设置)
我的目标是避免任何假定的方法(例如setTimeout)，我最终实现了接受的解决方案，上面有一点RxJS的味道:
private ngUnsubscribe = new Subject();
private tabSetInitialized = new Subject();
public tabSet: TabsetComponent;
@ViewChild('tabSet') set setTabSet(tabset: TabsetComponent) {
if (!!tabSet) {
this.tabSet = tabSet;
this.tabSetInitialized.next();
}
}
ngOnInit() {
combineLatest(
this.route.queryParams,
this.tabSetInitialized
).pipe(
takeUntil(this.ngUnsubscribe)
).subscribe(([queryParams, isTabSetInitialized]) => {
let tab = [undefined, 'translate', 'versions'].indexOf(queryParams['view']);
this.tabSet.tabs[tab > -1 ? tab : 0].active = true;
});
}
我的场景:我想根据路由器queryParams在@ViewChild元素上触发一个动作。由于在HTTP请求返回数据之前包装*ngIf为false， @ViewChild元素的初始化发生延迟。
它是如何工作的:只有当每个提供的可观察对象在订阅了combineLatest后发出第一个值时，combineLatest才第一次发出一个值。当@ViewChild元素被设置时，我的Subject tabSetInitialized会发出一个值。因此，我延迟了订阅下代码的执行，直到*ngIf变为正数，@ViewChild被初始化。
当然，不要忘记取消订阅ngOnDestroy，我使用ngUnsubscribe主题:
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
上面的答案并不适用于我，因为在我的项目中，ngIf是在一个输入元素上。我需要访问nativeElement属性，以便在ngIf为真时专注于输入。在ViewContainerRef上似乎没有nativeElement属性。以下是我所做的(遵循@ViewChild文档):
<button (click)='showAsset()'>Add Asset</button>
<div *ngIf='showAssetInput'>
<input #assetInput />
</div>
...
private assetInputElRef:ElementRef;
@ViewChild('assetInput') set assetInput(elRef: ElementRef) {
this.assetInputElRef = elRef;
}
...
showAsset() {
this.showAssetInput = true;
setTimeout(() => { this.assetInputElRef.nativeElement.focus(); });
}
我在聚焦之前使用了setTimeout，因为ViewChild需要一秒来分配。否则就没有定义了。
在Angular 8上工作，不需要导入ChangeDector
ngIf允许你不加载元素，避免给你的应用程序增加更多的压力。以下是我如何在没有ChangeDetector的情况下运行它
elem: ElementRef;
@ViewChild('elemOnHTML', {static: false}) set elemOnHTML(elemOnHTML: ElementRef) {
if (!!elemOnHTML) {
this.elem = elemOnHTML;
}
}
然后当我将我的ngIf值更改为true时，我将像这样使用setTimeout让它只等待下一个更改周期:
this.showElem = true;
console.log(this.elem); // undefined here
setTimeout(() => {
console.log(this.elem); // back here through ViewChild set
this.elem.do();
});
这也允许我避免使用任何额外的库或导入。
简化版，我在使用谷歌Maps JS SDK时遇到了类似的问题。
我的解决方案是将divand ViewChild提取到它自己的子组件中，当在父组件中使用时，可以使用*ngIf隐藏/显示。
之前
HomePageComponent模板
<div *ngIf="showMap">
<div #map id="map" class="map-container"></div>
</div>
HomePageComponent组件
@ViewChild('map') public mapElement: ElementRef;
public ionViewDidLoad() {
this.loadMap();
});
private loadMap() {
const latLng = new google.maps.LatLng(-1234, 4567);
const mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}
public toggleMap() {
this.showMap = !this.showMap;
}
后
MapComponent模板
<div>
<div #map id="map" class="map-container"></div>
</div>
MapComponent组件
@ViewChild('map') public mapElement: ElementRef;
public ngOnInit() {
this.loadMap();
});
private loadMap() {
const latLng = new google.maps.LatLng(-1234, 4567);
const mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}
HomePageComponent模板
<map *ngIf="showMap"></map>
HomePageComponent组件
public toggleMap() {
this.showMap = !this.showMap;
}
