在 angular 2 中查找模板元素

Question

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

在 Angular2 中，我想在 angular 渲染之前获取模板元素。但是我还是找不到应该使用哪种方法。

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

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

在angular1中，我使用下面的代码创建的

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' 来获取模板元素，这样我就可以在 angular 渲染它之前随意操作它。

结果是：

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

并且绑定也有效。

我想在 angular 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 来渲染它，这取决于 class 中的状态。动态添加的 HTML 根本不会被 Angular 处理 ()、[]、{{}} 只是按原样添加到 DOM 并被忽略Angular 对于动态添加的 HTML，即使选择器匹配，也不会创建组件或指令。

还支持动态添加组件，如

中所述

@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>

在 angular 2 中查找模板元素

finding template element in angular 2

typescript

angular2-template

angular