Question

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

use std::mem;

unsafe fn foo<'a, T>(func: impl Fn() -> T + 'a) -> Box<dyn Fn() -> T + 'static> {
    let boxed: Box<dyn Fn() -> T + 'a> = Box::new(func);
    mem::transmute(boxed)
}

在我的组件中，如果我未设置“ selector”属性，则我的代码块将被“ ng-component”封装，这是我不希望的，因为它破坏了我的CSS框架。

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

我想避免封装（解决方案A），或者能够动态操纵封装器上的属性/指令（解决方案B）

解决方案A：

     <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>

解决方案B：

    <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>

Answer 1

好，所以我使用了主机绑定，然后去了解决方案B：

<TextBox local:MyProperties.Mandatory="True" />
<ListBox local:MyProperties.Mandatory="False" />

我可以在元素准备好后设置host_classes，唯一的缺点是似乎无法在主机上使用ngif或使用可删除的属性。

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

1 个答案: