使用打字稿中的 angular 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">

Working Plunker for example usage

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

Binding a value from custom control to html control using angular 2 directives in typescript

html

typescript

angular2-directives

angular