Question

我有一个自定义指令，如下所示

@Component({
  selector: 'my-textfield' ,
  template: `
    <div>
      <label floating>{{label}}</label>
      <input type="text"></input>
    </div>
  `,
})
export class TextFieldInput{
    @Input label:string;
}

如何实现以下功能，将[(ngModel)]等属性传递给自定义指令的输入文本字段？

<my-textfield label="Name" [(ngModel)]="user.name" ></my-textfield>

Answer 1

只需添加

即可

[(ngModel)]="whatever"

到自定义指令的输入字段，如：

@Component({
  selector: 'my-textfield' ,
  template: `
    <div>
      <label floating>{{label}}</label>
      <input [(ngModel)]="whatever" type="text"></input>
    </div>
  `,
})

export class TextFieldInput{
    @Input label:string;
    @Input whatever:string
}

并在父组件中将其用作

<my-textfield label="Name" [whatever]="user.name" ></my-textfield>

这不完全是您的问题所暗示的，但对于您提供的示例，它具有相同的效果。将ngModel逻辑实现到自定义指令要复杂得多。

Angular2将外部属性传递给内部内容

1 个答案: