Jak Mogę wybrać element w szablonie komponentu?

Możesz uzyskać uchwyt do elementu DOM poprzez ElementRef poprzez wstrzyknięcie go do konstruktora twojego komponentu:

constructor(myElement: ElementRef) { ... }

Docs: https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
  selector:'display',
  template:`
   <input (input)="updateName($event.target.value)">
   <p> My name : {{ myName }}</p>
  `
})
class DisplayComponent implements OnInit {
  constructor(public element: ElementRef) {
    this.element.nativeElement // <- your direct element reference 
  }
  ngOnInit() {
    var el = this.element.nativeElement;
    console.log(el);
  }
  updateName(value) {
    // ...
  }
}

przykład zaktualizowany do pracy z najnowszą wersją

Aby uzyskać więcej informacji na temat elementu natywnego, tutaj

Kątowa 4 + : Użyj renderer.selectRootElement z selektorem CSS, aby uzyskać dostęp do elementu.

Mam formularz, który początkowo wyświetla wpis e-mail. Po wprowadzeniu wiadomości e-mail formularz zostanie rozszerzony, aby umożliwić im dalsze dodawanie informacji dotyczących ich projektu. Jeśli jednak są nie istniejącym klientem, formularz będzie zawierał sekcję adresową nad sekcją informacji o projekcie.

Na razie część wprowadzania danych nie została podzielona na komponenty, więc sekcje są zarządzane za pomocą dyrektyw *ngIf. Muszę skupić się na polu uwagi do projektu, jeśli są one istniejącym klientem, lub pole Imię, jeśli są nowe.

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');
    }
}

Ponieważ jedyne, co robię, to skupianie się na elemencie, nie muszę zajmuję się wykrywaniem zmian, więc mogę uruchomić połączenie do renderer.selectRootElement poza Angular. Ponieważ muszę dać nowym sekcjom czas na renderowanie, sekcja elementu jest owinięta w limit czasu, aby umożliwić wątkom renderującym nadrobienie czasu przed próbą zaznaczenia elementu. Gdy wszystko jest już ustawione, mogę po prostu wywołać element za pomocą podstawowych selektorów CSS.

Wiem, że ten przykład dotyczył przede wszystkim zdarzenia focus, ale trudno mi, aby nie można było tego użyć w innych konteksty.

Dla osób próbujących pobrać instancję komponentu wewnątrz *ngIf lub *ngSwitchCase, możesz wykonać tę sztuczkę.

Utwórz dyrektywę init.

import {
    Directive,
    EventEmitter,
    Output,
    OnInit,
    ElementRef
} from '@angular/core';

@Directive({
    selector: '[init]'
})
export class InitDirective implements OnInit {
    constructor(private ref: ElementRef) {}

    @Output() init: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();

    ngOnInit() {
        this.init.emit(this.ref);
    }
}

Eksportuj komponent o nazwie takiej jak myComponent

@Component({
    selector: 'wm-my-component',
    templateUrl: 'my-component.component.html',
    styleUrls: ['my-component.component.css'],
    exportAs: 'myComponent'
})
export class MyComponent { ... }

Użyj tego szablonu, aby uzyskać instancję ElementRef i MyComponent

<div [ngSwitch]="type">
    <wm-my-component
           #myComponent="myComponent"
           *ngSwitchCase="Type.MyType"
           (init)="init($event, myComponent)">
    </wm-my-component>
</div>

Użyj tego kodu w maszynopisie

init(myComponentRef: ElementRef, myComponent: MyComponent) {
}

Importuj dekorator ViewChild z @angular/ core, tak:

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



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

    class TemplateFormComponent {

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

Teraz możesz użyć obiektu 'myForm', aby uzyskać dostęp do dowolnego elementu w klasie.

Źródło: https://codecraft.tv/courses/angular/forms/template-driven/

 */
import {Component,ViewChild} from '@angular/core' /*Import View Child*/

@Component({
    selector:'display'
    template:`

     <input #myname (input) = "updateName(myname.value)"/>
     <p> My name : {{myName}}</p>

    `
})
export class DisplayComponent{
  @ViewChild('myname')inputTxt:ElementRef; /*create a view child*/

   myName: string;

    updateName: Function;
    constructor(){

        this.myName = "Aman";
        this.updateName = function(input: String){

            this.inputTxt.nativeElement.value=this.myName; 

            /*assign to it the value*/
        };
    }
}

Chciałbym dodać, że jeśli używasz ElementRef, zgodnie z zaleceniami wszystkich odpowiedzi, to od razu napotkasz problem, który ElementRef ma okropną deklarację typu, która wygląda jak

export declare class ElementRef {
  nativeElement: any;
}

To jest głupie w środowisku przeglądarki, gdzie nativeElement jest HTMLElement.

Aby to obejść, możesz użyć następującej techniki

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

interface ElementRef {
  nativeElement: HTMLElement;
}

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

Aby uzyskać natychmiastowe następne rodzeństwo, użyj tego

event.source._elementRef.nativeElement.nextElementSibling

Wybór elementu docelowego z listy. Łatwo jest wybrać konkretny element z listy tych samych elementów.

Kod komponentu:

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= '';
    }
  }
}

Kod Html:

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

Kod Css:

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