Есть ли способ визуализировать только шаблон / содержимое моего компонента Angular?

Question

Я хочу иметь чистый HTML, только содержимое компонента, а не контейнер, потому что я хочу использовать методологии ITCSS и RSCSS.

Итак, думая, что у меня есть 2 компонента: app-simple-card и app-superior-header; Я хочу иметь следующую структуру.

простой card.component.scss

.simple-card {
    > .header {
        @extends .superior-header;
        @extends .superior-header.-compact;
    }
}

превосходящий-header.component.scss

.superior-header {
    > .title {}

    &.-compact {}
}

Эта проблема

Angular отображает "контейнер" для содержимого компонента, заставляя меня использовать имя компонента как часть селектора. Это противоречит методологии RSCSS, поэтому я не хочу делать это таким образом, и было бы ужасно повторно использовать стили в другом проекте.

Прямо сейчас файл scss будет выглядеть так:

.simple-card {
    > app-superior-header > .header {...}
}

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

Answer 1

В пределах стиля компонента вы можете нацелить элемент компонента с помощью

:host {}

Если вы хотите настроить таргетинг на детей внутри компонента, используйте

&/deep/ {}

Answer 2

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

Angular Style Guide - это не книга законов, которую вы должны соблюдать, она просто содержит рекомендации. Если ваш вариант использования требует другой практики, используйте его

@Component({
  selector: '[appSimpleCard]',
})
export class SimpleCard {
  @HostBinding('class')
  classList = 'simple-card'; // or rather 'c-simple-card'
}

Используя селектор атрибутов для компонента, как это было обычной директивой, вы можете управлять всеми атрибутами, включая добавление класса компонентов ITCSS и событий для элемента хоста с привязками хоста и прослушивателями хоста, а также отображать шаблон. Это именно то, что мы хотим.

Как еще одно преимущество, вам не нужно будет добавлять :host { display: block } к стилям компонентов, как это обычно происходит со всеми пользовательскими тегами элементов. Вы также сохраняете дополнительный элемент в DOM для каждого компонента, отображаемого таким образом, который может добавить до нескольких сохраненных элементов в сложном приложении.

Это не будет работать с инкапсуляцией собственного представления (теневой DOM).