Question

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

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

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

<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;
            }
        }
    });

在上面的代码中，＆＃39;元素[0]＆＃39;是一个模板元素，它是＆＃39; <e-input>＆＃39;。我可以通过传递变量＆＃39;元素来获取模板元素。所以我可以在角度渲染之前按照我的意愿操纵它。

结果是：

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

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

提前致谢， Ť

Answer 1

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

还支持动态添加组件，如Angular 2 dynamic tabs with user-click chosen components

中所述

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

在角度2中找到模板元素

1 个答案: