在角4如何重新注入从模板

我使用角4建立一个应用程序，我想删除并创建了一个组件使用自定义结构指令重新插入DOM元素。在角4如何重新注入从模板

与自定义结构指令模板看起来是这样的。

<div class="header-nav" *showIn="'xs'"> 
     <a class="nav-link nav-icon" 
      [class.active]="isSearchFormOpen | async" 
      (click)="toggleSearchForm()"> 
      <clr-icon 
       [attr.shape]="(isSearchFormOpen | async) ? 'zoom-out' : 'zoom-in'"> 
      </clr-icon> 
     </a> 
    </div>

和'showIn'结构指令执行以下操作。

@Input() set showIn(target: string) { 
    console.log(this.templateRef); 
    this.breakPoint.subscribe((breakPoint) => { 
     if (target === breakPoint) { 
      this.viewContainer.createEmbeddedView(this.templateRef); 
     } else { 
      this.viewContainer.remove(); 
     } 
    }) 
};

的“断点”是一个返回值的每个窗口得到调整时间，并根据该值是否该指令的输入值相匹配，我想入或弹出的DOM元素。

问题是当元素被从视图中移除后再次被注入时，'clr-icon'元素被注入时没有我最初设置的属性绑定（'[attr.shape] =“（isSearchFormOpen |异步）？'缩小'：'放大'“），使元素本身不可见。只有在我明确点击窗口内部的这个属性绑定后，才能再次看到元素。

我怎样才能重新插入，而不会失去所有财产&属性绑定的DOM元素？

来源

2017-07-19 oosniss

你必须创建一个内嵌视图和参考保存它。然后插入或分离它。事情是这样的：

view = this.templateRef.createEmbeddedView(null); 

@Input() set showIn(target: string) { 
    console.log(this.templateRef); 
    this.breakPoint.subscribe((breakPoint) => { 
     if (target === breakPoint) { 
      this.viewContainer.insert(this.view); 
     } else { 
      this.viewContainer.detach(); 
     } 
    }) 
};

该解决方案更高性能的，因为它是简单地固定/删除了该视图DOM节点主机DOM节点，而不是创建和销毁视图中的每个从而破坏/创建时间DOM的节点相关风景。

来源

2017-07-20 04:41:36

我不知何故它利用ChangeDetectorRef.detectChanges（）工作，但我认为这是一个更好的解决方案。非常感谢你。 – oosniss

很高兴我可以帮助）祝你好运 –

在角4如何重新注入从模板

回答

相关问题