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

Question

我正在尝试创建一个指令，该指令在输入中接受 icon 属性作为图标名称。所以该指令在内部会尝试找到一个 span 元素，它将在其中应用 class。我想知道这是否可以从应用于 parent 的指令中实现。或者我是否也必须为 child 创建一个指令？

这是我的 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

 @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>

Answer 2

您可以像往常一样使用输入法。 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);
  }
}

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

Can I access child elements within a directive in Angular2?

angular2-directives

angular