Wie erhalte ich die ID eines Formulareingabeelements für ein Label in einer wiederverwendbaren Angular-Komponentenvorlage?

Question

Ich habe eine Angular 2-Komponente, die einige Formulareingabeelemente und Beschriftungen enthält, die ihnen zugeordnet werden sollen. Mehrere Instanzen der Komponente befinden sich möglicherweise gleichzeitig auf der Seite. Wie stelle ich das for Attribut des label und das id Attribut des input ein, um sie miteinander zu verbinden?

Wenn ich die ID des Eingabeelements in der Vorlage hart-Code, dann wird es nicht eindeutig auf der Seite sein. Aber ich möchte keinen Identifier in diese Komponente von seiner enthaltenen Komponente übergeben müssen; Die Verbindung zwischen dem Label und dem Formularelement ist nur das Problem dieser Komponente.

AngularJS hatte eine Scope $ ID-Eigenschaft, die zum Erstellen einer eindeutigen ID verwendet werden konnte. Hat Angular etwas Ähnliches für Komponenten?

Answer 1

Eine Möglichkeit ist es, die @Input Dekorateur und geben Werte von den Eltern zu verwenden, in dem Sie die Komponente an die untergeordnete Komponente in dem Formular oder Etikett vorzeigen

ist

Parent

<myComponent idToUse="id1"></myComponent> 
<myComponent idToUse="id2"></myComponent> 

ChildComponent

@Component({ 
selector : "myComponent", 
template: `<div> 
    <label for="{{idToUse}}">Name</label> 
    <input [(ngModel)]="name" type="text" id="{{idToUse}}"/> 
</div>` 
}) 
export class childComponent { 
@Input() idToUse; 
} 

haben

Sie können ein ähnliches Beispiel für die Verwendung derselben Komponente mehrmals in diesem Link Angular2 .. Using the same component to show different data on the same page depending on service response

finden