我正在尝试创建一个指令，该指令在输入中接受一个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?
}
}
您可以像平常一样使用输入。初始化所有视图后，通常会在ngAfterViewInit中进行DOM操作，但由于会设置icon属性，并且您没有尝试访问的ViewChildren，因此它也可能会在ngOnInit中工作。
HTML：
<div sfw-navbar-square [sfwNavbarIcon]="'my-icon'">
<span class="mdi mdi-magnify"></span>
</div>
这是指令本身（角度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);
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句