在角度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>