角度组件更换功能

Question

I am trying to use the angular component replacement feature.

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

For complicated interface, if I want to make the middle .com "li" into a whole new component, and write this code like:

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

How can I make sure that the finally compiled html is exactly what the original html template looks like?

It is not possible as far as I have searched from angular docs .

In angularjs , there is replacement feature. For a "compiled" angular framework, this is bit of off-putting not to have this.

Answer 1

View Encapsulation is what you need as you want the styles to bleed in from the parent component to the child component.

ViewEncapsulation.None - No Shadow DOM at all. Therefore, also no style encapsulation. ViewEncapsulation.Emulated - No Shadow DOM but style encapsulation emulation. ViewEncapsulation.Native - Native Shadow DOM with all it's goodness.

More on View Encapsulation

Answer 2

You can use an attribute selector in the com-component .

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

And then, in the template, simply add com-component as an attribute to the li element instead of adding it as a new tag.

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