[英]Angular 2 @ViewChild returns undefined
我查看了几个相关的帖子和文档,但似乎仍然无法从 @ViewChild 获得预期的行为。
最终,我试图设置 div 的滚动位置。 这个元素不是一个组件,而是我的 HTML 中的一个普通 div。
为此,我尝试使用 @ViewChild 来获取我需要的 DOM 元素,并设置其滚动值。 (顺便说一句,如果您知道在没有@ViewChild(或 jQuery)的情况下完成此任务的更好方法,我们将不胜感激!)
目前,@ViewChild 只返回 undefined。 进行一些虚拟检查: - 我正在 AfterViewInit 中访问我的元素 - 我没有任何其他指令,如 *ngIf 或 *ngFor 在这个元素上。
这是控制器:
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'portfolio-page',
templateUrl: './portfolio-page.component.html',
styleUrls: ['./portfolio-page.component.scss']
})
export class PortfolioPageComponent implements AfterViewInit{
@ViewChild('gallery-container') galleryContainer: ElementRef;
ngAfterViewInit(){
console.log('My element: ' + this.galleryContainer);
}
}
和模板:
<div id='gallery-container' class='gallery-image-container'>
<div class='gallery-padding'></div>
<img class='gallery-image' src='{{ coverPhotoVm }}' />
<img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' />
</div>
我的输出很简单:我的元素:未定义。
如您所见,我目前正在尝试通过 ID 访问元素,但也尝试过类名。 任何人都可以提供有关 ViewChild 选择器查询期望的更多详细信息吗?
我还看到了一些示例,其中散列“#”用作@ViewChild 使用的选择器标识符——但这会导致我使用#gallery-container 出现模板解析错误。
我想不出这里还有什么可能是错误的。 感谢所有帮助,谢谢!
此处提供完整代码: https : //github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page
尝试在模板中使用 ref:
<div id='gallery-container' #galleryContainer class='gallery-image-container'>
<div class='gallery-padding'></div>
<img class='gallery-image' src='{{ coverPhotoVm }}' />
<img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' />
</div>
并使用 ref 名称作为参数:
@ViewChild('galleryContainer') galleryContainer: ElementRef;
编辑
忘了说,任何这样声明的子视图只有在视图初始化后才可用。 第一次发生这种情况是在ngAfterViewInit
(导入并实现AfterViewInit
接口)。
参考名称不能包含破折号,否则这将不起作用
有时,如果在访问组件时尚未初始化该组件,则会收到一个错误,指出子组件未定义。
但是,即使您访问 AfterViewInit 中的子组件,有时@ViewChild 仍然返回 null。 该问题可能是由 *ngIf 或其他指令引起的。
解决方案是使用@ViewChildren 而不是@ViewChild 并订阅在组件准备就绪时执行的更改订阅。
例如,如果在父组件 ParentComponent 中您要访问子组件 MyComponent。
import { Component, ViewChildren, AfterViewInit, QueryList } from '@angular/core';
import { MyComponent } from './mycomponent.component';
export class ParentComponent implements AfterViewInit
{
//other code emitted for clarity
@ViewChildren(MyComponent) childrenComponent: QueryList<MyComponent>;
public ngAfterViewInit(): void
{
this.childrenComponent.changes.subscribe((comps: QueryList<MyComponent>) =>
{
// Now you can access the child component
});
}
}
订阅更改
@ViewChildren(MyComponent) childrenComponent: QueryList<MyComponent>
确认工作,结合setTimeout()
和notifyOnChanges()
和仔细的null
检查。
任何其他方法都会产生不可靠的结果并且难以测试。
我有一个类似的问题。 与您不同,我的@ViewChild
返回了一个有效的ElementRef
,但是当我尝试访问它的nativeElement
,它是undefined
。
我通过将视图id
设置为#content
解决它,而不是像#content = "ngModel"
。
<textarea type = "text"
id = "content"
name = "content"
#content
[(ngModel)] = "article.content"
required></textarea>
我今天遇到了同样的问题。 奇怪的是使用setTimeout
为我工作。
试试看:
ngAfterViewInit(){
setTimeout(_ => console.log('My element: ' + this.galleryContainer), 0);
}
这是 ViewChild 使用 DOM 元素的 .ts 文件代码
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'portfolio-page',
templateUrl: './portfolio-page.component.html',
styleUrls: ['./portfolio-page.component.scss']
})
export class PortfolioPageComponent implements AfterViewInit{
@ViewChild('galleryContainer') galleryContainer: ElementRef;
ngAfterViewInit(){
console.log('My element: ' + this.galleryContainer);
}
}
这是您的 .html 文件代码
<div #galleryContainer class='gallery-image-container'>
<div class='gallery-padding'></div>
<img class='gallery-image' src='{{ coverPhotoVm }}' />
<img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' />
</div>
希望有帮助!
另一种可能的情况是,当您在 angular 或 ionic 框架中使用 typescript 并从具有类似签名的 javascript 的函数调用 ViewChild 元素时。 请改用类似函数签名的打字稿(例如,使用粗箭头 =>)。 例如
accessViewChild(){
console.log(this.galleryContainer.nativeElement.innerHTML);
}
但是会显示打印未定义
accessViewChild = ()=>{
console.log(this.galleryContainer.nativeElement.innerHTML);
}
将打印内部 html。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.