angular - 组件是否可以删除自己的模板并有条件地将其放回原处？

Question

我正在查看 *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 放入模板中会造成混淆，这不是我想要的。

再次感谢您的耐心等待。

Answer 1

没有正式的方法可以从组件中删除模板，对我来说这是有意义的。如果你删除你的模板，谁会负责把它放回去。这在 ngIf 中有效，因为 ngIf 首先在场景后面创建一个 template 然后将元素嵌入其中，因此它具有对嵌入的引用元素，因此它可以删除它或把它放回去。