지시어 내에서 Angular2로 자식 요소에 액세스 할 수 있습니까?

Question

아이콘 이름이 될 icon 속성을 입력으로 받아 들일 지시문을 만들려고합니다. 따라서 지시문은 내부적으로 클래스를 적용 할 span 요소를 찾으려고 시도합니다. 부모에게 적용되는 지시문 내에서 이것이 가능한지 궁금합니다. 아니면 자녀를위한 지시문을 만들어야합니까?

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

@Directive({ 
    selector: '[sfw-navbar-square]' 
}) 
export class NavbarSquareDirective { 

    // Here I'd like to define a input prop that takes a string  

    constructor(private el: ElementRef, private renderer: Renderer) { 
     this.renderer.setElementClass(this.el.nativeElement, 'navbar-square-item', true); 
     this.renderer.setElementClass(this.el.nativeElement, 'pointer', true); 
     this.renderer.setElementClass(this.el.nativeElement, 'met-blue-hover', true); 
     // Here I'd like to pass that string as a class for the span child element. Can I have access to it from here? 
    } 
} 

Answer 1

당신은 당신이 평소와 같은 입력을 사용할 수 있습니다 여기에 지침 자체의

<div sfw-navbar-square sfw-navbar-icon> 
    <span class="mdi mdi-magnify"></span> 
</div> 

:

여기 내 HTML 코드입니다. DOM 조작은 일반적으로 모든 뷰가 초기화 될 때 ngAfterViewInit에서 수행되지만 아이콘 속성이 설정되고 액세스하려는 ViewChildren이 없기 때문에 ngOnInit에서도 작동합니다.

HTML :

import { Directive, ElementRef, Renderer2 } from '@angular/core'; 

@Directive({ 
    selector: '[sfw-navbar-square]' 
}) 
export class NavbarSquareDirective { 

    @Input('sfwNavbarIcon') icon:string; 

    constructor(private el: ElementRef, private renderer: Renderer2) { 
     this.renderer.addClass(this.el.nativeElement, 'navbar-square-item'); 
     this.renderer.addClass(this.el.nativeElement, 'pointer'); 
     this.renderer.addClass(this.el.nativeElement, 'met-blue-hover'); 
    } 

    ngAfterViewInit() { 
     let span = this.el.nativeElement.querySelector('span'); 
     this.renderer.addClass(span, this.icon); 
    } 
} 

Answer 2

@Directive({ 
    selector: '[sfw-navbar-square]' 
}) 
export class NavbarSquareDirective { 

    // Here I'd like to define a input prop that takes a string  

    constructor(private el: ElementRef, private renderer: Renderer) { 
     this.renderer.setElementClass(this.el.nativeElement, 'navbar-square-item', true); 
     this.renderer.setElementClass(this.el.nativeElement, 'pointer', true); 
     this.renderer.setElementClass(this.el.nativeElement, 'met-blue-hover', true); 
     let firstChild = this.el.nativeElement.childNodes[0]; 
     firstChild.className = ''; 

    } 
} 



<div sfw-navbar-square prop="some string" sfw-navbar-icon> 
    <span class="mdi mdi-magnify"></span> 
</div>