В чем разница между использованием id = "mydiv" и #mydiv в Angular HTML?

Question

Это простой англоязычный вопрос HTML, хотелось бы уточнить идентификатор тегов.Например, в моем коде у меня есть:

    <input class="inputfile" type="file" name="file" #file id="file" 
    (change)="onFileChange($event)"/>

    <button mat-mini-fab color="primary" (click)="file.click()">                        
            <mat-icon aria-label="Icon to upload file">cloud_upload</mat-icon>
    </button>

    <label for="file" >Upload your portifolio</label>

В этом примере мне пришлось установить #file на входе, чтобы кнопка работала, а также пришлось установить id="file" дляярлык на работу .Раньше я думал, что они имеют одну и ту же функцию и почти синтаксис.Может ли кто-нибудь уточнить, в чем польза каждого из них?

Answer 1

Если вы хотите идентифицировать элемент, используя функцию javascript, или из вашего контроллера, используя getElementByID, или указать стиль в таблице стилей, вам нужно установить id, который должен быть уникальным для этого элемента в вашей DOM.

Однако, если вы хотите получить доступ к своему элементу в файле DOM, вам нужно сослаться на элемент, используя #.если вы используете просто id, у вас будет ошибка Cannot read property 'XXX' of undefined в вашем браузере.

Например, чтобы показать / скрыть кнопку, используя значение ввода в DOM-файле без написания javascript /угловой код, вы можете сделать что-то вроде следующего, в котором установка id не сработает.

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #nameField matInput placeholder="Name">
  </mat-form-field>

  <button type="button" *ngIf="nameField.value!==''" >Submit</button>
</form>

Ссылка на это для обработки пользовательского ввода и это в качестве более широкого объяснения тега #.

Answer 2

В приложении Angular #mydiv может иметь различные функции в зависимости от контекста.

• В элементе DOM <div #mydiv> - это ссылка на элемент
• Ссылка наугловой компонент
• Для элемента, который является угловым компонентом или имеет угловую директиву, где определено exportas:"ngform", #mydiv="ngForm" создает ссылку на компонент.

Answer 3

id в html используется для назначения уникальной метки для элемента (позже может использоваться javascript). # в html, используемом как метка для этого элемента (как ссылка на этот элемент).Пример: вы нажали кнопку, и браузер прокручивает до этого элемента, отмеченного # file .