Wie kann ich ein Element in einer Komponentenvorlage auswählen?

Statt Injektion ElementRef und mit querySelector oder ähnliches von dort aus eine deklarative Art und Weise können stattdessen verwendet werden, um Zugriff auf Elemente in der Ansicht direkt:

<input #myname>

@ViewChild('myname') input; 

element

ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
}

StackBlitz Beispiel

• @ViewChild() unterstützt-Richtlinie-oder-Komponente geben Sie als parameter oder den Namen (string) einer template-Variablen.
• @ViewChildren() unterstützt auch eine Liste von Namen als Komma-separierte Liste (derzeit keine Leerzeichen erlaubt @ViewChildren('var1,var2,var3')).
• @ContentChild() und @ContentChildren() das gleiche tun, aber in dem Licht-DOM (<ng-content> projizierten Elemente).

Nachkommen

@ContentChildren() ist die einzige, die erlaubt auch die Abfrage für die Nachkommen

@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField; 

{descendants: true} sollte der Standard sein, ist aber nicht in 2.0.0 final, und es ist als ein bug


Dies wurde behoben in 2.0.1

Lesen

Wenn es eine Komponente und Richtlinien der read parameter kann angegeben werden, welche Instanz die zurückgegeben werden sollen.

Beispielsweise ViewContainerRef erforderlich ist, dynamisch erzeugte Komponenten anstelle der Standard - ElementRef

@ViewChild('myname', { read: ViewContainerRef }) target;

abonnieren Veränderungen

Obwohl-Ansicht Kinder sind nur gesetzt, wenn ngAfterViewInit() genannt wird und Inhalte, die Kinder werden nur gesetzt, wenn ngAfterContentInit() heißt, wenn Sie abonnieren möchten, um änderungen der Ergebnismenge der Abfrage, es sollte getan werden, in ngOnInit()

https://github.com/angular/angular/issues/9689#issuecomment-229247134

@ViewChildren(SomeType) viewChildren;
@ContentChildren(SomeType) contentChildren;

ngOnInit() {
  this.viewChildren.changes.subscribe(changes => console.log(changes));
  this.contentChildren.changes.subscribe(changes => console.log(changes));
}

direkten DOM-Zugriff

können nur die Abfrage von DOM-Elementen, aber nicht die Komponenten oder Richtlinie Instanzen:

export class MyComponent {
  constructor(private elRef:ElementRef) {}
  ngAfterViewInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }

  //for transcluded content
  ngAfterContentInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }
}

bekommen willkürliche projizierten Inhalten

Sehen Zugang transcluded Inhalt

InformationsquelleAutor der Antwort Günter Zöchbauer

Gewinkelt 4+:
Verwenden renderer.selectRootElement mit einem CSS-Selektor zum Zugriff auf das element.

Ich habe ein Formular, das zeigt zunächst eine E-Mail-Eingang. Nach der E-Mail eingegeben ist, wird das Formular erweitert werden, um Ihnen zu ermöglichen, weiterhin Informationen hinzufügen Bezug auf Ihr Projekt. Allerdings, wenn Sie nicht bestehenden Kunden, die form wird auch eine Adresse im Abschnitt über die Projekt-Informationen Abschnitt.

Als jetzt, das Dateneingabe Teil wurde nicht gebrochen, die bis in die Komponenten, so dass die Abschnitte verwaltet werden, *ngIf-Richtlinien. Ich brauche, um den Fokus auf die Projekt-Notizen-Feld, wenn Sie eine bestehende client oder das erste Feld name, wenn Sie neu sind.

Ich habe versucht, die Lösungen ohne Erfolg. Jedoch Update 3 in diese Antwort gab mir die Hälfte von der letztendlichen Lösung. Die andere Hälfte kam aus MatteoNY Antwort in diese thread. Das Ergebnis ist dieses:

import { NgZone, Renderer } from '@angular/core';

constructor(private ngZone: NgZone, private renderer: Renderer) {}

setFocus(selector: string): void {
    this.ngZone.runOutsideAngular(() => {
        setTimeout(() => {
            this.renderer.selectRootElement(selector).focus();
        }, 0);
    });
}

submitEmail(email: string): void {
    //Verify existence of customer
    ...
    if (this.newCustomer) {
        this.setFocus('#firstname');
    } else {
        this.setFocus('#description');
    }
}

Da das einzige, was ich Tue, ist die Einstellung, die den Fokus auf ein element, brauche ich nicht zu betreffen, mich mit der Erkennung von änderungen, so kann ich tatsächlich den Anruf zu renderer.selectRootElement außerhalb von Eckigen. Weil ich muss zu geben, den neuen Abschnitten der Zeit zu machen, ist das element Abschnitt ist eingehüllt in ein timeout zu ermöglichen, um die rendering-threads, Zeit, um aufzuholen, bevor die element-Auswahl versucht wird. Nachdem alle, setup, ich kann rufen Sie einfach das element mit grundlegenden CSS-Selektoren.

Ich weiß, dieses Beispiel beschäftigt sich vor allem mit dem Fokus-Ereignis, aber es ist schwer für mich, dass das nicht in anderen zusammenhängen genutzt.

InformationsquelleAutor der Antwort Neil T.

importieren Sie die ViewChild decorator von @Winkel/Kern, etwa so:

<form #f="ngForm"> ... </form>



 import { ViewChild } from '@angular/core';

    class TemplateFormComponent {

      @ViewChild('f') myForm: any;
    .
    .
    .
    }

nun können Sie 'myForm' - Objekt Zugriff auf ein beliebiges element in der Klasse.

Quelle:
https://codecraft.tv/courses/angular/forms/template-driven/

InformationsquelleAutor der Antwort Hany

Möchte ich hinzufügen, dass wenn Sie ElementRef wie empfohlen alle Antworten, dann werden Sie sofort auf das problem stoßen, dass ElementRef hat eine schreckliche Art Erklärung, die aussieht wie

export declare class ElementRef {
  nativeElement: any;
}

das ist dumm, in einer browser-Umgebung, wo nativeElement ist ein HTMLElement.

Zur Umgehung dieses können Sie verwenden Sie die folgende Technik

import {Inject, ElementRef as ErrorProneElementRef} from '@angular/core';

interface ElementRef {
  nativeElement: HTMLElement;
}

@Component({...}) export class MyComponent {
  constructor(@Inject(ErrorProneElementRef) readonly elementRef: ElementRef) { }
}

InformationsquelleAutor der Antwort Aluan Haddad

Auswahl Ziel-element aus der Liste. Es ist leicht zu wählen Sie das element aus der Liste mit den gleichen Elementen.

Komponente code:

export class AppComponent {
  title = 'app';

  listEvents = [
    {'name':'item1', 'class': ''}, {'name':'item2', 'class': ''},
    {'name':'item3', 'class': ''}, {'name':'item4', 'class': ''}
  ];

  selectElement(item: string, value: number) {
    console.log("item="+item+" value="+value);
    if(this.listEvents[value].class == "") {
      this.listEvents[value].class='selected';
    } else {
      this.listEvents[value].class= '';
    }
  }
}

html-code:

<ul *ngFor="let event of listEvents; let i = index">
   <li  (click)="selectElement(event.name, i)" [class]="event.class">
  {{ event.name }}
</li>

css-code:

.selected {
  color: red;
  background:blue;
}

InformationsquelleAutor der Antwort Sai Goud