避免组件封装或更改封装器的属性

Question

我正在构建一个动态添加组件的应用程序。例如，我有一个带模板的块组件：

  <div id="{{element.id}}" class="row"  [hidden]="hide">
       <h2>{{element.title}}</h2>
       <div class="{{element['col-size']}}">    
          <ng-template #BlockComponentContainer></ng-template>
       </div>
  </div>

在我的组件中，如果我不设置“选择器”属性，我的块就会被"ng- component“封装，因为它破坏了我的CSS框架。

     <app-page-form-part>
   <ng-component>
       <div id="{{element.id}}" class="row"  [hidden]="hide">
          <h2>{{element.title}}</h2>
          <div class="{{element['col-size']}}">    
          <ng-template #BlockComponentContainer></ng-template>
          </div>
       </div>
   </ng-component>

​

我希望要么避免封装(解决方案A)，要么能够动态地操作封装器(解决方案B)上的属性/指令。

解A :

    <app-page-form-part>
       <div id="{{element.id}}" class="row"  [hidden]="hide">
          <h2>{{element.title}}</h2>
          <div class="{{element['col-size']}}">    
          <ng-template #BlockComponentContainer></ng-template>
          </div>
       </div>
     </app-page-form-part>

解决方案B :

<app-page-form-part>
     <block id="{{element.id}}" class="row"  [hidden]="hide">
          <h2>{{element.title}}</h2>
          <div class="{{element['col-size']}}">    
              <ng-template #BlockComponentContainer></ng-template>
          </div>

      </block>
</app-page-form-part>

Answer 1

好的，我使用了主机绑定，然后选择了解决方案B：

 @HostBinding('attr.id') host_id;
 @HostBinding('class') host_classes = 'Block';

当元素准备好时，我可以设置我的host_classes，唯一的缺点是，在主机上使用ngif或使用deletable属性似乎不可能。