[英]Cannot read property 'viewContainerRef' of undefined when I want to clear it explicitly
There is a scenario where I want to clear 'viewContainer' on button click but it is showing error有一种情况,我想在单击按钮时清除“viewContainer”,但它显示错误
ERROR TypeError: Cannot read property 'viewContainer' of undefined
错误类型错误:无法读取未定义的属性“viewContainer”
Please check attached code for better understanding.请检查附加的代码以更好地理解。
Note: In my case, you will see, I've added click event on document.body
and also kept directive name as [ngIf](I know this is not the spoiler).注意:在我的例子中,你会看到,我在
document.body
上添加了 click 事件,并将指令名称保留为 [ngIf](我知道这不是剧透)。
Also, I tried to set this.ngIf = false;
另外,我试图设置
this.ngIf = false;
in my click's listener but that too generating the same error.在我的点击监听器中,但这也会产生同样的错误。
"ERROR TypeError: Cannot set property 'ngIf' of undefined"
“错误类型错误:无法设置未定义的属性‘ngIf’”
Thanks in advance.提前致谢。
app.component.ts app.component.ts
import { Component, TemplateRef, Directive, ViewContainerRef, Input, ElementRef, Renderer, ViewChild, ViewChildren, HostListener } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div *ngIf="val">
Hello cpIf Directive.
</div>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class AppComponent {
val: boolean = true;
}
@Directive({
selector: '[ngIf]'
})
export class CpIfDirective {
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef,
private renderer: Renderer) {
//this.viewContainer.createEmbeddedView(this.templateRef);
}
ngAfterViewInit() {
//this.viewContainer.createEmbeddedView(this.templateRef);
this.renderer.listen(document.body, 'click', this.clearView);
}
@Input() set ngIf(condition: boolean) {
if (condition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
clearView(event: any) {
this.viewContainer.clear();
//this.ngIf = false;
}
}
app.module.ts app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent, CpIfDirective } from './hello.component';
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule],
declarations: [AppComponent, HelloComponent, CpIfDirective],
bootstrap: [AppComponent]
})
export class AppModule { }
You are just not able to access this
inside clearView
您只是无法在
clearView
访问this
use this:用这个:
this.renderer.listen(document.body, 'click', (event) => {
// Do something with 'event'
this.viewContainer.clear();
})
You are not passing this reference to that clearView
function您没有将此引用传递给该
clearView
函数
or pass the container reference to the clearView like this或者像这样将容器引用传递给 clearView
this.renderer.listen(document.body, 'click', (event) => {
// Do something with 'event'
this.clearView(event, this.viewContainer)
})
clearView(event: any, element) {
element.clear();
//this.ngIf = false;
}
Oh yes, most importantly, arrow functions would work without changing anything, sorry I did not thought about this before :)哦,是的,最重要的是,箭头函数可以在不改变任何东西的情况下工作,抱歉我之前没有想过这个:)
An arrow function does not create its own this context, so this has its original meaning from the enclosing context.
箭头函数不会创建自己的 this 上下文,因此 this 具有其封闭上下文的原始含义。
clearView = (event: any) => {
this.viewContainer.clear();
//this.ngIf = false;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.