我可以在 Angular2 的指令中访问子元素吗? [英] Can I access child elements within a directive in Angular2?

问题描述

我正在尝试创建一个指令，该指令在输入中接受一个 icon 属性，该属性将是图标名称.因此，指令在内部会尝试找到一个 span 元素，它将在其中应用一个类.我想知道这是否可以从应用于父级的指令中实现.还是我也必须为孩子创建一个指令?

这是我的 HTML 代码:

<span class="mdi mdi-magnify"></span>

这是指令本身:

import { Directive, ElementRef, Renderer } from '@angular/core';@指示({选择器:'[sfw-navbar-square]'})导出类 NavbarSquareDirective {//这里我想定义一个接受字符串的输入 prop构造函数(私有 el:ElementRef，私有渲染器: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);//在这里，我想将该字符串作为 span 子元素的类传递.我可以从这里访问它吗?}}

解决方案

您可以像往常一样使用输入.DOM 操作通常在初始化所有视图时在 ngAfterViewInit 中完成，但它也可能在 ngOnInit 中工作，因为将设置 icon 属性并且您没有尝试访问任何 ViewChildren.

HTML:

<span class="mdi mdi-magnify"></span>

这是指令本身(Angular 4):

import { Directive, ElementRef, Renderer2 } from '@angular/core';@指示({选择器:'[sfw-navbar-square]'})导出类 NavbarSquareDirective {@Input('sfwNavbarIcon') icon:string;构造函数(私有 el:ElementRef，私有渲染器:Renderer2){this.renderer.addClass(this.el.nativeElement, 'navbar-square-item');this.renderer.addClass(this.el.nativeElement, '指针');this.renderer.addClass(this.el.nativeElement, 'met-blue-hover');}ngAfterViewInit() {let span = this.el.nativeElement.querySelector('span');this.renderer.addClass(span, this.icon);}}

I'm trying to create a directive that accepts in input a icon property which would be the icon name. So the directive internally would try to find a span element where it will apply a class. I wonder if this is possible from within the directive applied to the parent. Or do I have to create a directive for the child too?

Here's my HTML code:

<div sfw-navbar-square sfw-navbar-icon>
  <span class="mdi mdi-magnify"></span>
</div>

Here's the directive itself:

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?
  }
}

解决方案

You can just use an input as you normally would. DOM manipulation would normally be done in the ngAfterViewInit when all views are initialized, but it will probably also work in the ngOnInit as the icon property will be set and you don't have any ViewChildren you try to access.

HTML:

<div sfw-navbar-square [sfwNavbarIcon]="'my-icon'">
  <span class="mdi mdi-magnify"></span>
</div>

Here's the directive itself (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 的指令中访问子元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！