it-swarm.com.de

Was bedeutet Angular 2 Hashtags in der Vorlage?

Ich arbeite mit angular 2 und habe so etwas gefunden

<input #searchBox (keyup)="search(searchBox.value)"

und es funktioniert.

Allerdings verstehe ich die Bedeutung von # searchBox nicht. Ich habe weder in der Dokumentation noch in der Dokumentation etwas Klares gefunden.

Könnte mir jemand erklären, wie es funktioniert?

Vielen Dank

100
ackuser

Diese Syntax wird im Template-System Angular 2 verwendet, das dom-Elemente als Variablen deklariert.

hier gebe ich meiner Komponente eine Template-URL

import {Component} from 'angular2/core';

@Component({
   selector: 'harrys-app',
   templateUrl: 'components/harry/helloworld.component.html'
})

export class HarrysApp {}

Vorlagen rendern HTML. In einer Vorlage können Sie Daten-, Eigenschafts- und Ereignisbindung verwenden. Dies wird mit der folgenden Steuer abgeschlossen:

# - Variablendeklaration

() - Eventbindung

[] - Eigenschaftsbindung

[()] - Zweiwege-Eigenschaftsbindung

{{ }} - Interpolation

* - Strukturanweisungen

Die Syntax # Kann lokale Variablennamen deklarieren, die auf DOM-Objekte in einer Vorlage verweisen. Z.B.

 <span [hidden]="harry.value">*</span>
 <input type="text" #harry>
 {{ harry.value }}
124
Harry

Wenn Sie diese #searchBox setzen, können Sie diese Eingabe auf Ihrem TypeScript wie erhalten

    @ViewChild('searchBox') searchBox;
    console.info(searchBox.nativeElement.value)

[~ # ~] edit [~ # ~]

Ein Beispiel hinzufügen: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

48
Matheus Martins

Es wird eine Vorlagenvariable erstellt, auf die verwiesen wird

  • das input -Element, wenn das Element ein einfaches DOM-Element ist
  • die Komponenten- oder Anweisungsinstanz, wenn es sich um ein Element mit einer Komponente oder Anweisung handelt
  • eine bestimmte Komponente oder Direktive, wenn sie verwendet wird wie #foo="bar" wenn bar ist
@Directive({ // or @Component
  ...
  exportAs: 'bar'
})

Auf eine solche Vorlagenvariable kann in Vorlagenbindungen oder in Elementabfragen wie verwiesen werden

@ViewChild('searchBox') searchBox:HTMLInputElement;
18

Von angulartraining.com :

Template-Referenzvariablen sind ein kleines Juwel, mit dem man mit Angular viele nette Dinge erledigen kann. Normalerweise nenne ich diese Funktion "die Hashtag-Syntax", weil sie sich auf ein einfaches Hashtag stützt, um einen Verweis auf ein Element in einer Vorlage zu erstellen:

<input #phone placeholder="phone number">

Die obige Syntax ist recht einfach: Sie erstellt einen Verweis auf das Element input, das später in meiner Vorlage verwendet werden kann. Beachten Sie, dass der Gültigkeitsbereich für diese Variable die gesamte HTML-Vorlage ist, in der die Referenz definiert ist.

So könnte ich diese Referenz verwenden, um den Wert der Eingabe abzurufen:

<!-- phone refers to the input element --> 
<button (click)="callPhone(phone.value)">Call</button>

Beachten Sie, dass phone auf die Objektinstanz HTMLElement für die input verweist. Als Ergebnis hat phone alle Eigenschaften und Methoden eines HTMLElement (id, name, innerHTML, value, etc.)

Das oben Genannte ist ein guter Weg, um die Verwendung von ngModel oder einer anderen Art von Datenbindung in einer einfachen Form zu vermeiden, die nicht viel Validierung erfordert.


Funktioniert das auch mit Komponenten?

Die Antwort ist ja!

... das Beste daran ist, dass wir einen Verweis auf die tatsächliche Komponenteninstanz HelloWorldComponent erhalten, sodass wir auf alle Methoden oder Eigenschaften dieser Komponente zugreifen können (auch wenn sie als privat oder geschützt deklariert sind, was überraschend ist). :

@Component({
  selector: 'app-hello',
  // ...

export class HelloComponent {
   name = 'Angular';
}

[...]

<app-hello #helloComp></app-hello>

<!-- The following expression displays "Angular" -->
{{helloComp.name}}
17
ruffin