Я довольно новичок в угловой и HTML.

У меня есть два разных компонента, скажем componentA и componentB, оба с их репрезентативными файлами .html, .css и .ts.

В {{x0}} я определяю некоторые стили, например.

.compA-style {
    font-size: 20px;
}

Теперь в componentB.hmtl я использую директиву componentA:

<compA></compA>

Как я могу сейчас изменить стили {{x0}} внутри файла CSS {{x1}}, не изменив стиль внутри {{x2}}?

Примечание: я не могу изменить стиль componentA, потому что я хочу использовать неизмененный стиль внутри других компонентов, я хочу изменить только для componentB.

Примечание: я уже попробовал {{x0}} внутри {{x1}}, то есть я попробовал это:

.compA-style {
     font-size: 30px !important;
}

А затем в componentB.html:

<compA class=".compA-style"></compA>

Но это не сработало.

1
G.M 18 Янв 2021 в 21:52

2 ответа

Лучший ответ

Угловые инкапсулирует CSS на уровне компонентов.

Это означает, что даже если у вас есть несколько классов CSS с одним и тем же именем в нескольких компонентах, каждый из этих компонентов будет использовать свой собственный класс, независимо от структуры DOM.

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

Вы можете сделать это разными способами. Предположим, что compB содержит compA.

:: нг-глубокий

    :host {
        // ... Other styles

        ::ng-deep compA {
            // ... Custom compA styles
        }
    }

Объяснение : селектор ::ng-deep обеспечивает межкомпонентную видимость CSS с учетом его границ (селекторов оболочки). Все, что вы напишете в ::ng-deep compA, будет доступно всем в compA.

ПРЕДУПРЕЖДЕНИЕ : если вы используете ::ng-deep на базовом уровне в таблице стилей компонентов (без оболочки), содержащиеся в ней стили будут распределены по всему приложению вверх и вниз (НЕ только в текущем component), и они загружаются всякий раз, когда загружается компонент. Вот почему его обычно заключают в селектор :host.

Глобальные таблицы стилей

ПРЕДУПРЕЖДЕНИЕ : Если вы используете {{x0}} на базовом уровне в компонентной стайлинг-листе (без обертки), стили, которые он содержит, будет распространен как вверх и вниз по приложению (не только в пределах текущего компонента), и они загружают при когда компонентных нагрузок

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

Добавьте новые компонентные таблицы в {{x0}} массив в {{x1}} декоратор.

Это не обязательно относится к вашему случаю, но о нем стоит упомянуть.

    @Component({
        selector: 'app-main',
        templateUrl: './main.component.html',
        styleUrls: ['./main.component.css', '../styles/background.css', '../styles/input.css', '../styles/container.css' /* ... other stylesheets here */]
    })

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

1
Cristian Sarghe 18 Янв 2021 в 22:33

Как я могу теперь изменить стили компонента в файле CSS компонента C, не изменив стиль внутри компонента?

Есть только способ добавить стили без непосредственного редактирования компонента A.

На {{x0}}

:host ::ng-deep compA-style {
  font-size: 30px !important;
}

На componentA.html

<compA class="compA-style"></compA>

Примечание. Эта функциональность устарела.

Оформить заказ ng-deep. https://angular.io/guide/component-styles # deprecated-deep - and-ng-deep

1
Luis Reinoso 18 Янв 2021 в 19:02
65780436