我正在尝试创建一个指令,在输入中接受一个图标属性,它将是图标名称.因此,内部指令将尝试查找将应用类的span元素.我想知道这是否可以从应用于父代的指令中实现.或者我是否也必须为孩子创建一个指令？
<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','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?
}
}
解决方法
您可以像往常一样使用输入.在初始化所有视图时,通常会在ngAfterViewInit中完成DOM操作,但它可能也会在ngOnInit中工作,因为将设置icon属性,并且您没有尝试访问的任何ViewChildren.
HTML：
<div sfw-navbar-square [sfwNavbarIcon]="'my-icon'">
<span class="mdi mdi-magnify"></span>
</div>
这是指令本身(Angular 4)：
import { Directive,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);
}
}
