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是空的

编辑：

只是提到我不想隐藏视图，我只是想从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

以下是您要找的内容：

@Component({
    selector: 'your-selector',
    template: '<template [ngIf]="showView"> Here is my component template </template> ',
})
class MyComponent{

    showView: boolean = true;

   onSomeButtonClick(condition){
       if (condition) {
          this.showView = false;
       } else {
          this.showView = true;
        }
   }
}

现在，只需添加一个带有onClick回调的按钮，通过一些参数调用onSomeButtonClick即可完成

Answer 2

没有正式的方法从组件内部删除模板，对我来说这是有道理的。如果你删除你的模板，谁会照顾回来。这适用于d.printMonthFirst()，因为ngIf首先在场景后面创建一个ngIf，然后将元素嵌入其中，因此它具有对嵌入元素的引用，因此它可以删除它或放置它回来了。

Answer 3

我只能根据我对angular2和打字稿如何工作的有限理解来回答。

简答

没有

长答案

在打字稿级别，模板和类看起来像是单独的部分。但是，模板实际上是类声明的一部分。

一旦启动了一个组件类，所有那些模板变量binding，directive等就会变成组件对象中的零碎。

更改，包括删除（问题所要求的），模板基本上意味着重写类，需要重新转录，然后通过angular2引擎重新编译/重新启动。

从编程的角度来看，这是可能的，特别是对于javascript对象，可以使用方法删除所有兄弟节点并重新启动所有内容。但是，我没有看到组件重新启动的角度方式。

目前我所知道的最接近的技术是动态组件，父组件可以创建和销毁。在问题中提到了它。

（重新启动组件与动态组件几乎相同，差异在内部或外部启动。）

Answer 4

我建议您要其自身删除的组件将由其主机使用绑定到ngIf的布尔值卸载。为了使组件能够实际删除自身，布尔值应该在redux中具有状态的值，并且该状态将仅由希望自己删除的组件设置：）

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

4 个答案:

简答

长答案