我可以在Angular2中的指令中访问子元素吗？

Question

我正在尝试创建一个在输入中接受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?
    }
}

Answer 1

您可以像往常一样使用输入.在初始化所有视图时,通常会在ngAfterViewInit中完成DOM操作,但它可能也会在ngOnInit中工作,因为将设置icon属性,并且您没有尝试访问的任何ViewChildren.

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