Question

我希望将一个Angular组件移入DOM，并在用户操作后显示当前状态。

这个特定的需求诞生了，因为我的HTML结构中有一个中心搜索栏（绝对位置）。当用户在键入时从命题中选择一个项目时，我希望搜索栏减小它的大小并放入我的一个HTML列中（并将位置更改为相对位置）。

我没有看到任何未弃用的内容。（不推荐使用ComponentResolver，没有文档）。

在我的component.ts文件中，我通过这样做得到了元素的引用：

@ViewChild("searchInput") searchInput: ElementRef;
@ViewChild('searchContainer', {read: ViewContainerRef}) searchContainer;

在我的html模板中：

<nv-page>
    <!-- here search component in absolute position, centered by default in page -->
   <search-cmp #searchInput></search-cmp>
   <nv-board>
      <div class="row">
         <div #searchContainer class="col-md-6">  
             <!-- place search bar HERE when item selected -->
         </div>
         <div class="col-md-6">...</div>
      </div>
   </nv-board>
</nv-page>

我能做些什么吗？还有另外一种方法吗？非常感谢

将角度组件移动到DOM

0 个答案: