[英]Error while using “ElementRef” in exported component
I'm using ElementRef
in the CommentComponent which is exported to others modules like ArticleModule, ProductModule etc... 我在
ElementRef
中使用ElementRef
,该组件已导出到其他模块,例如ArticleModule,ProductModule等。
// CommentModule
@NgModule({
exports: [ CommentComponent ],
declarations: [ CommentComponent ],
providers: [ CommentService]
})
export class CommentModule { }
// Comment Component (belongs to CommentModule)
@Component({
selector: 'comments',
templateUrl: 'comment.component.html',
styleUrls: ['comment.component.scss']
})
export class CommentComponent implements OnInit {
suggOnTyping: string = 'hidden';
constructor(private _eref: ElementRef){}
@HostListener('document:click', ['$event'])
onClickOutside(event: any) {
event.preventDefault();
event.stopPropagation();
if (!this._eref.nativeElement.contains(event.target))
this.suggOnTyping = 'hidden';
}
}
// Article Module
@NgModule({
imports: [
CommonModule,
RouterModule,
CommentModule,
ArticleRoutingModule],
declarations: [ ArticleComponent ],
providers: [ArticleService, CommentService, CommentComponent],
schemas: [ NO_ERRORS_SCHEMA ]
})
ArticleComponent calls the CommentComponent from view like this: ArticleComponent从如下视图中调用CommentComponent:
<div class="article">
.......
<comments></comments>
</div>
Now when I'm trying to route through ArticleComponent, I'm getting: 现在,当我尝试通过ArticleComponent进行路由时,我得到:
core.js:1673 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[NgClass -> ElementRef]: StaticInjectorError(Platform: core)[NgClass -> ElementRef]: NullInjectorError: No provider for ElementRef!
core.js:1673错误错误:未捕获(承诺):错误:StaticInjectorError(AppModule)[NgClass-> ElementRef]:StaticInjectorError(平台:核心)[NgClass-> ElementRef]:NullInjectorError:没有ElementRef提供者! Error: StaticInjectorError(AppModule)[NgClass -> ElementRef]: StaticInjectorError(Platform: core)[NgClass -> ElementRef]: NullInjectorError: No provider for ElementRef!
错误:StaticInjectorError(AppModule)[NgClass-> ElementRef]:StaticInjectorError(平台:核心)[NgClass-> ElementRef]:NullInjectorError:没有ElementRef提供者!
It seems ElementRef cannot pass through 'provider' because when I remove it from CommentComponent everything works fine. 看来ElementRef无法通过'provider',因为当我从CommentComponent删除它时,一切正常。
What is the problem ? 问题是什么 ?
I'm using Angular 6 by the way 我正在使用Angular 6
Remove CommentComponent
from providers list of AritcleModule
. 删除
CommentComponent
从供应商名单AritcleModule
。 CommentComponent
is already declared in CommentModule
. CommentComponent
在已经声明CommentModule
。
// Article Module
@NgModule({
declarations: [ ArticleComponent],
providers: [ArticleService, CommentService, CommentComponent ], //<-- remove from here
schemas: [ NO_ERRORS_SCHEMA ]
})
Remove ElementRef
from constructor
which is throwing this error and if you want to access the element then you can put the reference for element and use @ViewChild decorator in ts file. 从
ElementRef
此错误的constructor
中删除ElementRef
,如果要访问元素,则可以放置元素的引用,并在ts文件中使用@ViewChild装饰器。
html html
<div #ele>hello/div> <!-- element reference goes here -->
ts ts
@ViewChild("ele") _eref: ElementRef;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.