在角度2中找到模板元素

Question

我在使用动态属性绑定创建自定义指令的Angular2时遇到了一些问题。

在Angular2中，我想在角度渲染之前获取模板元素。 但我仍然无法找到应该使用哪种方法。

我想创建一个指令' <e-input></e-input> '，它将包含函数用来创建模板的属性，如下所示：

<e-input data-id="myID"></e-input>

在角度1中，我使用以下代码来创建它。

equip.directive("eInput",function(){ //<e-input>
        return{
            restrict: 'E',
            template: funciton(element){
                var xInput = document.createElement("INPUT");
                xInput.id = element[0].getAttribute("data-id");
                xInput.setAttribute("ng-model",xInput.id);

                return xInput;
            }
        }
    });

在上面的代码中，'element [0]'是一个模板元素，它是' <e-input> '。 我可以通过传递变量'element'来获取模板元素，这样我就可以在角度渲染之前按照我想要的方式操作它。

结果是：

<e-input data-id="myID">
     <input id="myID" ng-model="myID"/>
</e-input>

而绑定也有效。

我想在角度2做同样的事情，但不知道该怎么做。 我不知道要传递哪个变量。 这是我在Angular2中尝试但没有运气的代码：

export class eInputBuilder{
    buildInput(xxxxxx){
        var xInput = document.createElement("INPUT");
        xInput.id = xxxxxx.getAttribute("data-id");
        xInput.setAttribute("[(ngModel)]",xInput.id);

        return xInput.outerHTML;
    }
}
@Component({
    selector:"e-input",
    template: eInputBuilder.prototype.buildInpuit(xxxxxx)
})
export class eInputComponent{
}

在上面的代码中，'xxxxxx'是我想传递给buildInput（）的变量，但我不知道要传递什么。

提前谢谢，T

Answer 1

这不是Angular2的工作原理。 在呈现之前，您无法获得对组件模板的引用。 如果你想操纵它，请使用*ngIf或*ngFor来渲染它，具体取决于类中的状态。 动态添加的HTML不是由Angular处理的() ， [] ， {{}}只是按原样添加到DOM中，并被Angular忽略用于动态添加的HTML，即使选择器匹配也不会创建组件或指令。

还支持的是动态添加组件，如Angular 2动态选项卡中所述，用户单击选择的组件

@Component({
  selector: 'my-comp',
  template: `
  <input [id]="inputId" [ngModel]="model" (ngModelChange)="modelChange.emit($event)">
`)
export class SomeComponent {
  @Input() 
  inputId:string;

  @Input()
  data:string;

  @Output() 
  dataChange = new EventEmitter();
}

然后就可以使用它了

<my-comp [(dataChange)]="parentData" [inputId]="'x123'"></my-comp>