[angular] 컴포넌트 템플릿에서 요소를 어떻게 선택할 수 있습니까?

거기에서 주입 ElementRef하거나 사용 querySelector하거나 유사한 대신에 , 선언적인 방법을 사용하여 뷰의 요소에 직접 액세스 할 수 있습니다.

<input #myname>

@ViewChild('myname') input; 

요소

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

StackBlitz 예제

• @ViewChild () 는 지시문 또는 구성 요소 유형을 매개 변수 또는 템플리트 변수의 이름 (문자열)으로 지원합니다.
• @ViewChildren () 은 또한 이름 목록을 쉼표로 구분 된 목록으로 지원합니다 (현재 공백은 허용되지 않음 @ViewChildren('var1,var2,var3')).
• @ContentChild () 와 @ContentChildren () 은 동일하지만 가벼운 DOM ( <ng-content>투사 요소)에서 작동합니다.

자손

@ContentChildren() 자손을 쿼리 할 수있는 유일한 사람입니다.

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

{descendants: true}기본값이어야하지만 2.0.0 최종 버전이 아니며 버그로 간주

됩니다. 2.0.1에서 수정되었습니다.

읽다

구성 요소 및 지시문이있는 경우 read매개 변수를 통해 리턴 할 인스턴스를 지정할 수 있습니다.

예를 들어 ViewContainerRef기본값 대신 동적으로 생성 된 구성 요소에 필요한ElementRef

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

구독 변경

뷰 하위 ngAfterViewInit()는 호출 될 때만 설정 되고 컨텐츠 하위는 호출 될 때만 설정되지만 ngAfterContentInit()조회 결과의 변경 사항을 구독하려면 다음에서 수행해야합니다.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));
}

직접적인 DOM 액세스

DOM 요소 만 쿼리 할 수 ​​있지만 컴포넌트 또는 지시문 인스턴스는 조회 할 수 없습니다.

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

임의의 투영 된 컨텐츠를 얻는다

변환 된 컨텐츠 액세스를 참조하십시오.

답변

constructor(myElement: ElementRef) { ... }

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) {
    // ...
  }
}

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

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

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

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

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

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

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

class TemplateFormComponent {

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

 */
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*/
        };
    }
}