web-dev-qa-db-ja.com

Angular2のディレクティブ内で子要素にアクセスできますか？

アイコン名となるiconプロパティを入力で受け入れるディレクティブを作成しようとしています。したがって、ディレクティブは内部的に、クラスを適用するspan要素を見つけようとします。これは親に適用されるディレクティブ内から可能かどうか疑問に思います。または、子供用のディレクティブも作成する必要がありますか？

これが私のHTMLコードです：

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

ディレクティブ自体は次のとおりです。

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?
    }
}
angularangular2-directives
10
Caius

通常どおりに入力を使用できます。 DOM操作は通常、すべてのビューが初期化されるときにngAfterViewInitで行われますが、アイコンプロパティが設定され、アクセスしようとするViewChildrenがないため、ngOnInitでもおそらく機能します。

HTML：

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

ここにディレクティブ自体があります（Angular 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);
    }
}
17
bas
 @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>
0
Milad