问题
显示模板中的相应元素后获取 @ViewChild
的最优雅方法是什么?
下面是一个例子。还有Plunker可用。
组件.模板.html:
<div id="layout" *ngIf="display">
<div #contentPlaceholder></div>
</div>
组件.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
有一个选项,但它会导致太多无用的调用。
答案(Plunker)
为 ViewChild 使用 setter:
private contentPlaceholder: ElementRef;
@ViewChild('contentPlaceholder') set content(content: ElementRef) {
if(content) { // initially setter gets called with undefined
this.contentPlaceholder = content;
}
}
一旦 *ngIf
变为 true
,将使用元素引用调用 setter。
请注意,对于 Angular 8,您必须确保设置 { static: false }
,这是其他 Angular 版本中的默认设置:
@ViewChild('contentPlaceholder', { static: false })
注意:如果 contentPlaceholder 是一个组件,您可以将 ElementRef 更改为您的组件类:
private contentPlaceholder: MyCustomComponent;
@ViewChild('contentPlaceholder') set content(content: MyCustomComponent) {
if(content) { // initially setter gets called with undefined
this.contentPlaceholder = content;
}
}
克服这个问题的另一种方法是手动运行变化检测器。
您首先注入 ChangeDetectorRef
:
constructor(private changeDetector : ChangeDetectorRef) {}
然后在更新控制 *ngIf 的变量后调用它
show() {
this.display = true;
this.changeDetector.detectChanges();
}
onInit()
之后的某个时间尝试使用它们时,孩子们仍然未定义,所以我在调用任何子函数之前添加了 detectChanges
并修复了它。 (我使用了接受的答案和这个答案)
*ngIf
属性时依赖同一函数中的子级,则可能会发生这种情况。在这种情况下,可能尚未检测到更改,并且 ViewChild 属性可能仍未定义。
角度 8+
您应该添加 { static: false }
作为 @ViewChild
的第二个选项。这会导致在更改检测运行 后解析查询结果,从而允许在值更改后更新您的 @ViewChild
。
例子:
export class AppComponent {
@ViewChild('contentPlaceholder', { static: false }) contentPlaceholder: ElementRef;
display = false;
constructor(private changeDetectorRef: ChangeDetectorRef) {
}
show() {
this.display = true;
// Required to access this.contentPlaceholder below,
// otherwise contentPlaceholder will be undefined
this.changeDetectorRef.detectChanges();
console.log(this.contentPlaceholder);
}
}
Stackblitz 示例:https://stackblitz.com/edit/angular-d8ezsn
detectChanges
这似乎不是您应该做的事情,我宁愿有一个 setter 而不必在我的组件中注入额外的垃圾。更不用说上面的两条评论说它不起作用......所以我不同意这应该是公认的答案,它是一种替代方案。
this.changeDetectorRef.detectChanges();
上面的答案对我不起作用,因为在我的项目中,ngIf 位于输入元素上。当 ngIf 为真时,我需要访问 nativeElement 属性以便专注于输入。 ViewContainerRef 上似乎没有 nativeElement 属性。这是我所做的(在 @ViewChild documentation 之后):
<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 需要一秒钟才能被分配。否则它将是未定义的。
setTimeout
? I usually wrap all required actions into setTimeout(()=>{},1) as shown above. Is there a more correct way?
正如其他人提到的,最快最快的解决方案是使用 [hidden] 而不是 *ngIf。采用这种方法,组件将被创建但不可见,因此您可以访问它。这可能不是最有效的方法。
这可能有效,但我不知道它是否适合您的情况:
@ViewChildren('contentPlaceholder', {read: ViewContainerRef}) viewContainerRefs: QueryList;
ngAfterViewInit() {
this.viewContainerRefs.changes.subscribe(item => {
if(this.viewContainerRefs.toArray().length) {
// shown
}
})
}
ngAfterViewInit()
而不是 ngOnInit()
。我假设 viewContainerRefs
已经初始化但还没有包含项目。好像我记错了。
AfterViewInit
确实有效。我已经删除了我所有的评论,以免引起人们的困惑。这是一个有效的 Plunker:plnkr.co/edit/myu7qXonmpA2hxxU3SLB?p=preview
ViewChild
的 const
参数相关的更改
另一个快速的“技巧”(简单的解决方案)就是使用 [hidden] 标签而不是 *ngIf,重要的是要知道在这种情况下 Angular 构建对象并将其绘制在 class:hidden 这就是 ViewChild 工作没有问题的原因.所以重要的是要记住,你不应该在可能导致性能问题的沉重或昂贵的物品上使用隐藏
<div class="addTable" [hidden]="CONDITION">
我的目标是避免任何假设某些东西的 hacky 方法(例如 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
元素的初始化发生延迟。
它是如何工作的: 仅当每个提供的 Observable 发出自 combineLatest
被订阅的那一刻起的第一个值时,combineLatest
才会第一次发出一个值。我的主题 tabSetInitialized
在设置 @ViewChild
元素时发出一个值。因此,我延迟 subscribe
下代码的执行,直到 *ngIf
变为正并且 @ViewChild
被初始化。
当然不要忘记取消订阅 ngOnDestroy,我使用 ngUnsubscribe
主题:
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
一个简化版本,我在使用 Google Maps JS SDK 时遇到了类似的问题。
我的解决方案是将 div
和 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;
}
如果我在 Angular 9 中使用 ChangeDetectorRef 它对我有用
@ViewChild('search', {static: false})
public searchElementRef: ElementRef;
constructor(private changeDetector: ChangeDetectorRef) {}
//then call this when this.display = true;
show() {
this.display = true;
this.changeDetector.detectChanges();
}
在我的例子中,只有当模板中存在 div 时,我才需要加载整个模块,这意味着出口位于 ngif 中。这样,每次 angular 检测到元素 #geolocalisationOutlet 时,它都会在其中创建组件。该模块也只加载一次。
constructor(
public wlService: WhitelabelService,
public lmService: LeftMenuService,
private loader: NgModuleFactoryLoader,
private injector: Injector
) {
}
@ViewChild('geolocalisationOutlet', {read: ViewContainerRef}) set geolocalisation(geolocalisationOutlet: ViewContainerRef) {
const path = 'src/app/components/engine/sections/geolocalisation/geolocalisation.module#GeolocalisationModule';
this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
const moduleRef = moduleFactory.create(this.injector);
const compFactory = moduleRef.componentFactoryResolver
.resolveComponentFactory(GeolocalisationComponent);
if (geolocalisationOutlet && geolocalisationOutlet.length === 0) {
geolocalisationOutlet.createComponent(compFactory);
}
});
}
<div *ngIf="section === 'geolocalisation'" id="geolocalisation">
<div #geolocalisationOutlet></div>
</div>
使用 Angular 8 无需导入 ChangeDector
ngIf 允许您不加载元素并避免给您的应用程序增加更多压力。这是我在没有 ChangeDetector 的情况下运行它的方法
elem: ElementRef;
@ViewChild('elemOnHTML', {static: false}) set elemOnHTML(elemOnHTML: ElementRef) {
if (!!elemOnHTML) {
this.elem = elemOnHTML;
}
}
然后,当我将 ngIf 值更改为真实时,我会像这样使用 setTimeout 来等待下一个更改周期:
this.showElem = true;
console.log(this.elem); // undefined here
setTimeout(() => {
console.log(this.elem); // back here through ViewChild set
this.elem.do();
});
这也让我避免使用任何额外的库或导入。
对于 Angular 8 - 空值检查和 @ViewChild
static: false
骇客的混合
用于等待异步数据的分页控制
@ViewChild(MatPaginator, { static: false }) set paginator(paginator: MatPaginator) {
if(!paginator) return;
paginator.page.pipe(untilDestroyed(this)).subscribe(pageEvent => {
const updated: TSearchRequest = {
pageRef: pageEvent.pageIndex,
pageSize: pageEvent.pageSize
} as any;
this.dataGridStateService.alterSearchRequest(updated);
});
}
只需确保将静态选项设置为 false
@ViewChild('contentPlaceholder', {static: false}) contentPlaceholder: ElementRef;
我自己也有同样的问题,使用 Angular 10。
如果我尝试使用 [hidden]
或 *ngIf
,那么 @ViewChild
变量总是 undefined。
<p-calendar #calendar *ngIf="bShowCalendar" >
</p-calendar>
我通过不将其从网页中删除来修复它。
我使用 [ngClass]
使控件具有 opacity:0
,并将其完全移开。
<style>
.notVisible {
opacity: 0;
left: -1000px;
position: absolute !important;
}
</style>
<p-calendar #calendar [ngClass]="{'notVisible': bShowCalendar }" >
</p-calendar>
是的,我知道,它既愚蠢又丑陋,但它解决了问题。
我还必须将控件设为静态。我不明白为什么.. 但是,如果没有这个改变,它又拒绝工作:
export class DatePickerCellRenderer {
@ViewChild('calendar', {static: true }) calendar: Calendar;
We had a situation to set tabindex on ngif
html:
<div #countryConditional1 *ngIf="country=='USA'">
<input id="streetNumber" [(ngModel)]="streetNumber" pInputText>
</div>
ts:
@ViewChild('countryConditional1') set countryConditional1(element){
if (element){
const container2 = document.querySelector("#someElement");
container2.querySelector("span > input").setAttribute("tabindex", "18");}
阅读并尝试这个
Make sure passing the param { static: false } to @ViewChild resolve the problem.
**template.html code**
<div *ngIf="showFirtChild">
<first-child #firstchildComponent ></first-child>
</div>
**in .ts file**
export class Parent implements
{
private firstChild: FirstchildComponent;
@ViewChild('firstchildComponent', { static: false }) set content(content:
FirstchildComponent) {
if(content) {
this.firstchildComponent = content;
}
}
constructor(){}
ShowChild(){
this.showFirtChild = true;
if(this.firstchildComponent){
this.firstchildComponent.YourMethod()
}
}
}
如果 setter 似乎无法使用 @ViewChild
工作(根本没有被调用),请尝试使用 @ContentChild
。
不定期副业成功案例分享
contentPlaceholder
是ElementRef
而不是ViewContainerRef
。<div #contentPlaceholder></div>
时会自动调用它。从技术上讲,您可以像任何其他 setterthis.content = someElementRef
一样手动调用它,但我不明白您为什么要这样做。