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：

<div sfw-navbar-square [sfwNavbarIcon]="'my-icon'"> 
    <span class="mdi mdi-magnify"></span> 
</div> 

ここディレクティブ自体は（4角）です：

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>