Question

我有一些带有指令的动态创建元素。在某些情况下，我必须从element的指令调用一个函数。如果我静态地创建了这个元素，我会在组件中使用@ViewChild('myElement') myElement，例如：

<div #myelement myDirective>...</div>

HTML中的

。但是我无法做到这一点因为我动态创建了这些元素（我不知道这样的方法可以动态地给出#myelement1，#myelement2，...标签。我的想法是使用document.getElementById()获取元素，但我无法从本机DOM元素访问该指令。

知道如何在不使用@VievChild()的情况下访问这些元素的指令吗？

Answer 1

你可以这样做：

HTML：

<div mask="mask1"></div>
<div mask="mask2"></div>

TS：

import { Directive, Input} from '@angular/core';

@Directive({
  selector: '[mask]' 
})
export class Mask {
  @Input() mask: string;

  ngOnInit(){
    console.log(this.mask);
  }

  getMask(){
    return this.mask;
  }
}

import { Component, ViewChildren,QueryList } from '@angular/core';
//...
export class AppComponent {
  public user;

  @ViewChildren(Mask) masks: QueryList<Mask>;
  constructor( ){}

 ngAfterViewInit(){

    this.masks.forEach((mask)=>{
       console.log(mask.getMask());
    })
   // not sure of this
   this.masks.changes.subscribe((mask)=>{
       console.log(mask.getMask());
    })
 }

}

Angular 2 - 从DOM元素的指令调用函数

1 个答案: