Угловые визуализированные атрибуты DOM html - PullRequest
Новая
       73

Угловые визуализированные атрибуты DOM html

1 голос
/ 17 мая 2019

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

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

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

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

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

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

Ответы [ 2 ]

0 голосов
/ 17 мая 2019

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

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

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

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

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

0 голосов
/ 17 мая 2019

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

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

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

...