Угловые компоненты атрибута 2+ - дочерние элементы подавлены - PullRequest
Новая
       19

Угловые компоненты атрибута 2+ - дочерние элементы подавлены

0 голосов
/ 04 октября 2019

У меня есть угловое приложение, где мне нужен пользовательский визуальный компонент (с шаблоном), чтобы подавить его пользовательский тег / элемент. У родительского приложения есть CSS, который теряется при добавлении нового элемента компонента. Я считаю, что это распространенная жалоба, и лучшее предложение, которое я нашел, состояло в том, чтобы у компонента был селектор атрибута.

Кажется, это работает хорошо, но я обнаружил, что при добавлении компонента со селектором атрибутадругие элементы внутри этого элемента контейнера подавляются. Похоже, что я делаю что-то не так, или это известное ограничение селекторов атрибутов?

Вот быстрый стек , который показывает сценарий. Я надеюсь, что это простая ошибка новичка?

Простой компонент с селектором атрибутов: 

import { Component, Input } from '@angular/core';

@Component({
  selector: '[appAttrib]',
  template: `<span style="color:blue">outer level<span style="color:red"> {{title}}!</span></span>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class AttribComponent  {
  @Input() title: string;
}

Использование компонента, показывающее, что теряется: 

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<!--This shows the use of the attribute component.  The component shows up, but the other items in the paragraph do not-->
<p appAttrib title="inner text here">
  Here is some paragraph text.  You won't see this.
  <span>here is some footer stuff.  You won't see this either.</span>
</p>

<!--This shows the same paragraph elements without the attribute component, which obviously will show up.-->
<p>
  Here is some paragraph text without the custom attribute.  You WILL see this.
  <span>here is some footer stuff.  You WILL see this too.</span>
</p>
...