小编vik*_*hik的帖子

我想要一个由标签和文本框组成的模板.此模板可以在我的页面中的不同位置重复使用.要做到这一点,我已经创建了一个MyTextComponent.我想知道如何将不同的值绑定到组件输入.

例如:

MyTextComponent

import {Component, Input} from 'angular2/core';
@Component({
    selector: 'myText',
    template:`<label>{{someLabel}}</label>
                 <input id=myId type="text" [(ngModel)]=bindModelData>
                 `
})
export class MyTextComponent {
    @Input() myId : string;
    @Input() bindModelData: any;
}

MyPageComponent

import {Component} from 'angular2/core';
import {MyTextComponent} from './MyTextComponent.component'

@Component({
    template:`<myText myId="id1" bindModelData="myString1"></myText>
              <myText myId="id2" bindModelData="myString2"></myText>
              `,
    directives:[MyTextComponent]
})
export class MyPageComponent{
    myString1: string;
    myString2: string;
}

如何将MyTextComponent输入的ngModel绑定到MyPageComponent局部变量？

编辑:添加@Output后尝试,但它没有工作:( MyPageComponent中的插值是空白的,以及日志打印未定义.但插值适用于mytextComponent.任何想法

import {Component} from 'angular2/core';
import {MyTextComponent} from './myText.component'

@Component({
    template:`<myText myId="id1" [(bindModelData)]="myString1"></myText>
              <myText myId="id2" [(bindModelData)]="myString2"></myText>
              {{myString1}}
              {{myString2}}

              <button (click)="clicked()">Click …