Как использовать селектор, похожий на ng-container в angular-4.x

Question

Я использую angular-4.x, а внутри компонента я использую селектор abc, как показано ниже:

@Component({
  selector: "Abc",
  templateUrl: "Abc.html",
  styleUrls: [
    "Abc.css"
  ]
})

но тег "Abc" также присутствует в DOM, но я хочу, чтобы он вел себя как "ng-container", который отражает только дочерний DOM на странице, а не сам тег.

Answer 1

Это может или не может работать для вас, в зависимости от варианта использования.

В любом случае, ваш селектор не обязательно должен быть селектором тегов, он также может быть селектором атрибутов, что означает, что в отображаемом выводе не будет добавлено никакого нового тега.

Итак, если ваш компонент имеет следующие метаданные...

selector: '[abc]',
template: `<ng-content></ng-content>`
styles: [`:host { background-color: red }`],

И вы используете это так...

<div abc>
  <span>Hello <b>world!</b></span>
</div>

Рендеринг будет точно такой (нет <abc> тег добавлен).

---

Другое возможное "решение" - использовать ARIA для назначения роли вашему пользовательскому элементу. Например, если вы хотите <abc> чтобы быть кнопкой, вы можете сделать что-то подобное в классе.

@HostBinding('role') role = 'button'

Это означает, что семантически это все еще кнопка, хотя это не <button> элемент.

Опять же, может или не может работать для вашего варианта использования, но это идея для обходного пути.

---

В противном случае невозможно создать компонент, который делает то, что вы хотите. Структурные директивы подходят близко, но тогда вы не сможете применять стили, потому что styles недопустимые метаданные для @Directive,

Но вы можете создать безоперационную структурную директиву, введя ViewContainerRef а также TemplateRef и просто создать экземпляр шаблона в OnInit жизненный цикл крюка.

constructor(private templateRef: TempalteRef,
            vcr: ViewContainerRef) {
}

ngOnInit() {
  this.vcr.createEmbeddedView(this.templateRef)
}

Но вам все равно придется использовать его с <ng-container>, если вы не хотите, чтобы визуализированный элемент инкапсулировал его содержимое. Так что ваш запрос "нравится <ng-container> но в данном случае это не так.