구성 요소의 하위 요소 가져 오기

이것은 비교적 간단한 것 같지만 문서를 찾을 수 없습니다. 구성 요소의 자식 요소에 액세스해야하는 angular2 지시문이 있습니다. 내 ElementRef.nativeElement로구성 요소의 하위 요소 가져 오기

<ion-input> 
    <input> 
    <button></button> 
</ion-input>

을 내가 입력 요소에 대한 참조를 얻을 필요가 예를 들어 내가있다. 어떻게해야합니까? 또한이 지시문은 제 3 자 구성 요소에서 사용되므로 템플릿을 편집하거나 elementRef를 추가 할 수 없습니다.

출처

2016-07-02 CodesLikeA_Mokey

봅니다'firstElementChild' https://plnkr.co/edit/UDoT7WzVXx582uM8ZFYK?p=preview – yurzui

elementRef가있는 경우 여기에서 일반 DOM 메서드 (예 : Element.querySelector)를 사용할 수 있습니다. 당신은 아마 또한 ngOnInit 후크를하고 싶은 것 :

ngOnInit() { 
    let input = elementRef.nativeElement.querySelector('input') 
}

출처

2016-07-02 11:29:01 dfsq

미안 해요, 난 그냥 잘 설명하지 않은를 사용합니다. html에는 제 3 자 구성 요소의 결과가 있습니다. html을 변경할 수 없습니다. 입력 필드를 조작하는 특성 지시문을 만들려고합니다. 내가 말하는 말은 의미가 있니? 내 말은 –

입니다. 그런 다음 ngOnInit에서 'elementRef.nativeElement.querySelector ('input ')'으로 읽으십시오. – dfsq

그 티켓입니다. 고마워. 당신이 그것에 대한 답을 작성한다면 나는 그것을 표시 할 것입니다. –

당신은 @ViewChild 데코레이터를 사용해야합니다.

먼저 검색 할 하위 요소에 ID를 추가하십시오.

<ion-input> 
    <input #input> 
    <button></button> 
</ion-input>

그런 다음 구성 요소에서 검색하십시오. 여기

import { Component, ViewChild, ElementRef, OnInit } from "@angular/core" 
@Component({ 
    selector: "my-component", 
    template: ` 
    <ion-input> 
     <input #input> 
     <button></button> 
    </ion-input>` 
}) 
export class MyComponent implements OnInit { 
    @ViewChild("input") inputChild: ElementRef; 

    ngOnInit() { 
    haveFunWith(inputChild); 
    } 
}

더 많은 정보 : https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

출처

2017-02-03 21:42:40

이것을 읽는 누군가를 위해, 이것은 이것을하기의 각 (가장 기술적으로 정확한) 방법이다. –

구성 요소의 하위 요소 가져 오기

답변

관련 문제