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来标识元素，或指向样式表中的样式，则需要设置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>

参考this处理用户输入，而this作为＃标签的更广泛解释。

Answer 2

在Angular应用程序中，#mydiv可以根据上下文具有不同的功能。

在DOM元素<div #mydiv>上是对该元素的引用
对Angular组件的引用
在作为Angular组件或具有Angular指令（定义了exportas:"ngform"的元素）上，#mydiv="ngForm"创建一个组件引用。

Answer 3

html中的

id 用于为元素分配唯一标记（以后可以由javascript使用）。 html中的＃用作该元素上的标记（例如指向该元素的链接）。例如：您按下按钮，浏览器滚动到标有 #file 的元素。

在Angular HTML中使用id =“ mydiv”和#mydiv有什么区别？

3 个答案: