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

发布时间：2020-12-17 17:59:06 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个指令,在输入中接受一个图标属性,它将是图标名称.因此,内部指令将尝试查找将应用类的span元素.我想知道这是否可以从应用于父代的指令中实现.或者我是否也必须为孩子创建一个指令？这是我的HTML代码： div sfw-navbar-square sfw-navbar-ic

我正在尝试创建一个指令,在输入中接受一个图标属性,它将是图标名称.因此,内部指令将尝试查找将应用类的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','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);
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!