角度分量替换功能

Question

我正在尝试使用角度组件替换功能。

<ul>
  <li></li>
  <li class="com"></li>
  <li class="com"></li>
</ul>

对于复杂的界面，如果我想让中间.com＆＃34; li＆＃34;进入一个全新的组件，并编写如下代码：

<ul>
  <li></li>
  <com-component></com-component>
</ul>

如何确保最终编译的html与原始html模板完全相同？

就我从有角度docs搜索而言，这是不可能的。

在angularjs中，有replacement功能。对于＆＃34;编译＆＃34;角度框架，这有点令人不快，没有这个。

Answer 1

当您希望样式从父组件渗透到子组件时，您需要使用View Encapsulation。

  

ViewEncapsulation.None - 根本没有Shadow DOM。因此，也没有   风格封装。 ViewEncapsulation.Emulated - 没有Shadow DOM但是   样式封装仿真。 ViewEncapsulation.Native - Native   暗影DOM完美无缺。

更多关于View Encapsulation

Answer 2

您可以在com-component。

中使用属性选择器

@Component({
...
selector: '[com-component]'
})

然后，在模板中，只需将com-component作为属性添加到li元素，而不是将其添加为新标记。

<ul>
  <li></li>
  <li com-component></li>
</ul>