Angular - Mise à jour d'une étiquette dans un modèle importé

Question

J'ai une application dans laquelle j'ai besoin d'importer un composant dans un autre et d'utiliser le modèle de composant importé.

Est-il possible de modifier une balise HTML dans le modèle parent. Par exemple:

J'ai un composant « composant un », avec ce modèle:

<input type="text" class="form-control"> 

Dans un modèle de composant « composant b », je voudrais ajouter des attributs à la balise d'entrée ci-dessus. Exemple de modèle "component-b":

<h3>Enter your name:</h3> 
<component-a></component-a> 

Comment mettre à jour le point d'entrée? Merci.

Answer 1

Oui. si je veux ajouter de nouveaux attributs dans le composant b qui n'existent pas dans le composant a une instance permet de prendre l'attribut value de <input>

// component-a 
@Component({ 
selector:'component-a', 
template:'<input type="text" value={{inputData}} class="form-control">' 
}) 
export class ComponentA{ 
@Input() 
inputData:string; 
} 

// component-b 
<component-a [inputData]="'hello'"></component-a> 

Answer 2

Vous pouvez utiliser une variable d'entrée dans le composant-b @Input() modifyInput: boolean = false;.

Maintenant, vous pouvez ajouter des attributs en fonction de la valeur booléenne:

<input type="text" class="form-control" [attr.name]="modifyInput ? 'Modified' : 'unmodified'"/>