Пользовательские HTML-атрибуты DOM с визуализацией в Angular

Я новичок в интерфейсе и начал использовать Angular.

Когда я смотрю на окончательный DOM, я вижу такой код

<style>
.pane[_ngcontent-c0]~
....
}
</style>

<div _ngcontent-c0 class="pane" ...

Это использует селекторы атрибутов CSS, но мой вопрос связан с настраиваемым атрибутом «_ngcontent-c0», в html5 есть новая функция с именем «пользовательские атрибуты данных, которые имеют префикс имени (data-*). В этом случае пользовательский атрибут не использует синтаксис данных, это не делает документ недействительным? Можно ли определить пользовательские атрибуты без префикса данных?

Заранее спасибо С уважением


angular html angular-template custom-attribute
person tt0686    schedule 17.05.2019    source источник
comment
пожалуйста, проверьте это, подробно объяснил это :host, :host-context, ::ng-deep - Angular View Encapsulation на blog.angular-university.io /угловой-хост-контекст   -  person Joel Joseph    schedule 17.05.2019

Ответы (2)


arrow_upward
1
arrow_downward

Вы правы, что это уже недействительный HTML, потому что _ngcontent-c0 не указано в спецификации HTML. Но это просто означает, что атрибут не определен.

Вы всегда можете добавить настраиваемые атрибуты, но они, скорее всего, не будут иметь эффекта, потому что браузер их просто игнорирует. Имейте в виду, что это может измениться в будущем.

Эти пользовательские атрибуты используются для инкапсуляции стилей CSS. В CSS вы по-прежнему можете использовать эти настраиваемые атрибуты для определения стилей, и стили одного компонента не будут перетекать в стили другого компонента. Это в основном обходной путь для Shadow DOM. Angular автоматически добавляет эти пользовательские атрибуты ко всем стилям компонента, чтобы инкапсулировать его стили.

person Joost    schedule 17.05.2019

arrow_upward
2
arrow_downward

Что вы там видите:

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

.pane[_ngcontent-c0] ‹-- Это селектор CSS. Каждое правило CSS в таблице стилей компонентов относится к нему. Это происходит в предварительной обработке.

По этому поводу очень мало удобочитаемых документов, это лучшее, что я смог найти:

https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b

Вы не должны влиять на них, но CLI также не должен ничего отключать молча.

Скорее CLI, вероятно, перестанет компилироваться из-за синтаксической ошибки шаблона.

Создавая компонент, вы создаете собственные теги HTML (вроде). Я имею в виду <app-component> и тому подобное. Они являются корнем области действия компонента для элементов DOM (еще раз, не на 100% точно, это больше для визуализации).

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

Именно так вы манипулируете атрибутами HTML в Angular (и не только для пользовательских)

Это добавляет или удаляет атрибут из элемента

<input [attr.disabled]="!value ? null : '' "

Приведет к <input disabled=''>, который совпадает с <input disabled>. Если у нас есть значение, это будет просто <input>.

И при использовании синтаксиса [attr. я думаю, что нет ограничений на имена, которые вы можете использовать, кроме того, что разрешено Angular.

Чтобы сделать data-attributes:

<div [attr.data-attr-test]=" 'Foo' ">

И просто используя значение из компонента:

<img [src]="value">

Существуют также директивы, которые размещаются как атрибуты, но используются для манипулирования DOM и изменения поведения:

https://angular.io/guide/attribute-directives

person mchl18    schedule 17.05.2019
comment
Спасибо за ваш ценный ответ либо - person tt0686; 17.05.2019
comment
Вы можете иметь в виду: Спасибо каждому за ценный ответ. - person Trunk; 24.06.2020