在角度 2 中查找模板元素答案

【问题标题】：finding template element in angular 2在角度 2 中查找模板元素
【发布时间】：2016-06-03 10:44:41
【问题描述】：

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

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

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

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

在 Angular 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>'。我可以通过传递变量“元素”来获取模板元素，这样我就可以在角度渲染之前随意操作它。

结果是：

<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

【问题讨论】：

什么是“在 ngOnInit 之前触发的事件”。 ngOnInit 与该问题有何关系？您尝试解决的实际问题是什么？
我编辑了我的问题并尽可能清楚地说明问题。抱歉我的问题不好，英语不好
现在好多了。问题是一些像“模板”这样的术语有几个含义，比如<template>或<div *ngFor="...">，其中结构指令（以*开头）创建一个隐含的<template>，...

标签： typescript angular angular2-template

【解决方案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>

【讨论】：