我正在查看 *ngIf
的源代码:
@Input()
set ngIf(condition: any) {
if (condition && !this._hasView) {
this._hasView = true;
this._viewContainer.createEmbeddedView(this._template);
} else if (!condition && this._hasView) {
this._hasView = false;
this._viewContainer.clear();
}
}
我可以有一个像下面这样的组件吗?
@Component({})
class MyComponent{
constructor (
public _template : TemplateRef,
public _viewContainer : ViewContainerRef) {
}
onSomeButtonClick(condition){
if(condition){
removeMyView();
}else{
putTheViewBackIfItsRemoved();
}
}
}
尝试在组件内部使用 ngIf
的逻辑不起作用,我认为这是因为组件的 viewContainerRef 是空的
编辑:
只是提一下,我不想隐藏 View ,我只是想将它从 DOM 中删除。
换句话说,我们可以像 ngIf
这样的宿主元素吗?
我知道您不能在 host
上放置指令,这就是为什么我认为也许可以使用 ViewContainer
和 TemplateRef
来实现相同的目的。
另一件事是,在使用 Angular 并创建动态组件之后,我现在唯一的方法是使用 ViewContainerRef
在 DOM 中创建一个新组件;我的重要问题是,Angular 本身是否以相同的方式创建组件?
如果是,我们不能以某种方式访问包含组件的容器吗?
对于刚开始学习 Angular 并希望在这里提供帮助的人(感谢),我应该说我真诚地知道如何在我的模板中使用 ngIf
:
我现在了解什么是 ngIf
以及它的作用:
但是:
<div *ngIf="condition"></div>
这不是我的意思,只是因为这可能会删除我模板中的内容,而且我必须将所有内容包装在该 div 中才能使其正常工作,这不是我想要的。
我想清除整个模板以及内部的 ngIf
。
更新:
澄清一下:
换句话说,这就像在主机上有一个 ngIf
:
@Component({
host:{
'*ngIf':'shouldBeRemoved'
}
})
class MyComponent{
我知道你不能将 ngIf 放在主机上,因为它的指令和主机只编译静态值,这就是为什么我想问是否有办法用 viewContainerRef
或其他东西来处理它。
请注意,将 ngIf
放入模板中会造成混淆,这不是我想要的。
再次感谢您的耐心等待。
最佳答案
没有正式的方法可以从组件中删除模板,对我来说这是有意义的。
如果你删除你的模板,谁会负责把它放回去。
这在 ngIf
中有效,因为 ngIf
首先在场景后面创建一个 template
然后将元素嵌入其中,因此它具有对嵌入的引用元素,因此它可以删除它或把它放回去。
关于angular - 组件是否可以删除自己的模板并有条件地将其放回原处?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42884215/