6
votes

Quelle est la différence entre l'utilisation de id = "mydiv" et #mydiv dans Angular HTML?

C'est une simple question HTML angulaire, j'aimerais un peu de clarté sur l'identifiant des balises. Par exemple, dans mon code, j'ai:

    <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>

Dans cet exemple, j'ai dû définir #file dans l'entrée pour que le bouton fonctionne et aussi a dû définir id = "file" pour que l'étiquette fonctionne . Auparavant, je pensais qu'ils avaient la même fonction et que c'était juste une question de syntaxe. Quelqu'un pourrait-il préciser quelles sont les utilisations de chacun?

angular html

1 commentaires

#file en angular n'est pas le même # en css. # est utilisé pour référencer une variable de modèle qui peut être connectée dans le fichier .ts . référez-vous ceci

3 Réponses :

-1
votes

id en html utilisé pour attribuer une marque unique à l'élément (plus tard, peut être utilisé par javascript). # en html utilisé comme marque sur cet élément (comme lien vers cet élément). Exemple: vous avez appuyé sur le bouton et le navigateur fait défiler jusqu'à cet élément marqué par #file .

0 commentaires

3
votes

Si vous souhaitez identifier un élément en utilisant la fonction javascript ou depuis votre contrôleur en utilisant getElementByID ou pour pointer vers un style dans une feuille de style, vous devez définir le id qui doit être unique pour cet élément dans votre DOM.

Cependant, lorsque vous souhaitez accéder à votre élément dans le fichier DOM, vous devez faire référence à l'élément en utilisant # . si vous utilisez uniquement id , vous aurez l'erreur Impossible de lire la propriété 'XXX' de non défini dans votre navigateur.

Par exemple, pour afficher / masquer un bouton en utilisant la valeur d'une entrée dans un fichier DOM sans écrire de code javascript / angulaire vous pourriez faire quelque chose comme ce qui suit, dans lequel la configuration de l ' id ne fonctionnerait pas.

<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>

Référence à ceci pour traiter les entrées des utilisateurs et ceci dans un sens plus large explication de la balise #.

0 commentaires

1
votes

Dans une application Angular, #mydiv peut avoir différentes fonctions selon le contexte.

Sur un élément DOM
se trouve une référence à l'élément
Une référence à un composant angulaire
Sur un élément qui est un composant angulaire, ou qui a une directive angulaire, où exportas: "ngform" est défini, # mydiv = "ngForm" crée un composant référence.

0 commentaires