问题
在模板中显示相应的元素后获得@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有一个选项，但它会导致太多无用的调用。
答案(设置)
确保将参数{static: false}传递给@ViewChild可以解决这个问题。
template.html代码
<div *ngIf="showFirtChild">
<first-child #firstchildComponent ></first-child>
</div>
在.ts文件
export class Parent implements {
private firstChild: FirstchildComponent;
@ViewChild('firstchildComponent', { static: false }) set content(content:
FirstchildComponent) {
if(content) {
this.firstchildComponent = content;
}
}
ShowChild(){
this.showFirtChild = true;
if(this.firstchildComponent){
this.firstchildComponent.YourMethod()
}
}
}
上面的答案并不适用于我，因为在我的项目中，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需要一秒来分配。否则就没有定义了。
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
