如何在Angular 2中将值从父组件传递给指令？

Question

如果我的父组件中包含以下代码行

<input datepicker type="text" (change)="update($event)"/>

如何将值传递给datepicker指令？

Answer 1

在指令中定义输入

datepicker.directive.ts

import {Input} from '@angular/core';
...
export class DatePickerDirective{
    @Input() config:any = {}; //set to default configuration
}

现在，如果您绑定到模板中此指令的config属性，Angular将传递该值

parent.component.ts

dateConfig:any;

parent.component.html

<input datepicker type="text" [config]="dateConfig"/>