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

您可以像往常一样使用输入。 DOM操作通常在初始化所有视图时在ngAfterViewInit中完成，但它可能也适用于ngOnInit，因为图标属性将被设置，并且您没有尝试访问的任何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);
    }
}

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>

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

2 个答案: