使用打字稿中的角度2指令将值从自定义控件绑定到html控件

Question

我创建了一个自定义控件指令作为“my-text-box”，在这个指令中我使用 html 控件<input>，我需要将值从我的自定义控件传递到 html 输入控件。在 Angular1 中，我只是在使用 <my-text-box id="1" name="Box 1"> 之类的指令，在指令中使用范围变量的自定义属性，我将值分配给 html 控件，例如 <input type="text" id="{{id}}" name={{name}} > 我如何在 Angular 2 中使用这种场景。

这是我的示例代码：

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

您可以为此使用@Input()：

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

在您的父组件中，您现在可以像这样使用它：

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

或者如果你需要绑定到变量：

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

---

工作Plunker 示例用法