如何在Angular6项目中使用jquery为gridstack动态创建的小部件中添加新小部件

Question

我有一个按钮，上面已经添加了click事件，在该方法中，我正在生成一个新的网格堆栈小部件

AddWidget(fieldType) 

{
   var templateString;
   switch(fieldType) 
   {
      case 'Text' :
                    <div class="grid-stack-item-content" id="" style="background-color: #18bc9c">
                        <button class="fa fa-ellipsis-v buttonClicked" style="float:right;border:none;background-color: transparent;margin-right:2px;"></button>
                        <div class="ms-TextField" style="margin-left: 10px;">
                             <label class="ms-Label ">
                                Field Name
                             </label>
                             <input class="ms-TextField-field updateValue" style="width:75%" type="text" placeholder="Enter Field Name">
                       </div>
                  </div>
          break; 
   }
}

之后，

    var $htmlString = $(templateString);
    $htmlString.children('div.grid-stack-item-content').attr('id', newid);
    var grids = $('.grid-stack').data('gridstack');
    grids.addWidget($htmlString, 1, 1, 3, 1, true, 3);

这很好，但是我被阻止了如何在这个新创建的小部件内再次添加新的小部件。

假设我在上面创建的小部件中有一个按钮，并且需要在其中添加另一个子grid-stack-item小部件。

如何解决这个问题？