html - 在 Angular HTML 中使用 id ="mydiv"和 #mydiv 有什么区别？

Question

这是一个简单的 Angular HTML 问题，我想对标签的 id 进行一些澄清。例如，在我的代码中，我有:

    <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 从 Controller 识别元素或指向样式表中的样式，则需要设置 id该元素必须在整个 DOM 中是唯一的。

但是，当您想访问 DOM 文件中的元素时，您需要使用 # 来引用该元素。 .如果您只使用 id您将收到错误 Cannot read property 'XXX' of undefined在您的浏览器中。

例如，为了使用 DOM 文件中的输入值显示/隐藏按钮而不编写任何 javascript/angular 代码，您可以执行以下操作，其中设置 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>

引用 this处理用户输入和 this作为对 # 标签的更广泛解释。