Что делает атрибут `#` в HTML?

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

Сначала я имел следующее (Это использование Angular2, но я подозреваю, что только отличается как onclick событие обрабатывается):

        <span>
            <input type="text" id="bioName">
        </span>
        <span class="icon-pencil" (click)="editField(bioName);"></span>

... но это не сработало. Затем я нашел пример, который идентифицировал поле ввода по-разному, и это работало для меня. Это было следующим образом:

        <span>
            <input type="text" #bioName>
        </span>
        <span class="icon-pencil" (click)="editField(bioName);"></span>

К сожалению, я не могу найти ничего, что объясняет это. Поиск "хэша" и "фунта" с HTML и Javascript дает слишком много результатов, которые не имеют к этому никакого отношения в предметной области.

Итак, что делает # в этом случае? Может ли id не использоваться для получения ссылки на элемент DOM при настройке обработчика событий? Что это значит, поэтому я могу его загрузить и прочитать соответствующую документацию?

Ответ 1

Это специальный Angular2, обычный HTML не распознает этот синтаксис, т.е. вам нужно использовать id="bioName" для доступа к тегу с CSS/JavaScript.

Здесь больше информации о том, как использовать # в Angular2.

Ответ 2

Hash (#) - синтаксис для определения переменной шаблона в Angular 2 шаблонах. Он используется для назначения уникальных идентификаторов элементам шаблона, которые впоследствии можно использовать для получения ссылки на элементы шаблона в компоненте. Например, в вашем случае вы можете использовать переменную bioName, чтобы получить ссылку на элемент ввода в своем компоненте, и вы можете делать с ней все, что хотите, - получить имя файла, размер файла или даже сам файл. Это делается с помощью ViewChild decorator. Вы можете проверить ответ Я написал несколько дней назад и посмотреть, какие шаблонные переменные используются в основном.