Binding einen Wert von benutzerdefinierten Steuerelement zu HTML-Steuerelement mit angular 2 Direktiven in Typoskript

Question

Ich habe eine benutzerdefinierte Steueranweisung als "my-Text-Box" erstellt, innerhalb dieser Richtlinie verwende ich HTML-Steuerelement <input>, ich muss Werte übergeben Mein benutzerdefiniertes Steuerelement zu HTML-Eingabesteuerelement. In angular1 einfach ich verwende wie <my-text-box id="1" name="Box 1"> meine benutzerdefinierte Attribute Umfang Variablen in der Richtlinie verwendet wird, zugewiesen i die Werte Kontrolle wie <input type="text" id="{{id}}" name={{name}} > HTML, wie ich dieses Szenario

Hier in Winkel 2. verwenden können, ist mein Beispielcode:

AppComponent.ts

import {Component} from '@angular/core'; 
import {TextBoxComponent} from './TextBoxComponentDirective'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1>{{title}}</h1> <my-text-box id="66" name="MyText1"></my-text-box>', 
    directives:[TextBoxComponent] 
}) 

export class AppComponent { 
title="Sample TextBox"; 
} 

TextBoxComponentDirective.ts

import {Component,Input,Directive} from '@angular/core'; 

@Component({ 
    selector:'my-text-box', 
    templateUrl: './TextBoxTemplate.html', 
}) 
export class TextBoxComponent { 

    @Input() id; 
} 

TextBoxTemplate.html

<input type="text" [name]="name" [id]="id"/> 

Answer 1

Sie @Input() dafür verwenden können:

@Component({ 
    selector: 'my-text-box', 
    template: ` 
     <input type="text" [id]="id" [name]="name" > 
    ` 
}) 
export class MyTextBoxComponent { 
    @Input() id; 
    @Input() name; 
} 

In Ihrem Stammkomponente jetzt können Sie es verwenden, wie so:

<my-text-box id="1" name="Box 1"> 

Or Wenn Sie an Variablen binden müssen:

<my-text-box [id]="someId" [name]="theBoxName"> 

---

Plunker Verwendungsbeispiele Arbeiten