Question

我有一个Angular2指令，它将我的DatePicker的maxDate设置为这样。

@Directive({
    selector: '[maxDate]'
})

export class MaxDateDirective {
    private domElement: any;
    @Input() set maxDate(max: any) {
        if (max) {
            $(this.domElement).data("DateTimePicker").maxDate(max);
        }
    }

    constructor(private element: ElementRef, private renderer: Renderer) {
        this.domElement = element.nativeElement;
    }
}

在我的组件中，我发布了dateFrom和dateTo就是这样。

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="label-control">{{'START_DATE' | translate}}</label>
                            <input id="owner_start_date" name="owner_start_date" type="text" class="form-control datepicker" [(ngModel)]="filters.lastWeek"
                                [maxDate]="filters.today" />
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="label-control">{{'END_DATE' | translate}}</label>
                            <input id="owner_end_date" name="owner_end_date" type="text" class="form-control datepicker" [(ngModel)]="filters.today"
                            />
                        </div>
                    </div>

所以，我的fromDate选择器有[maxDate]="filters.today"，它绑定到toDate选择器的[(ngModel)]="filters.today"，但我的@Input() set maxDate(max: any)只触发一次。如何从指令内部检查组件中模型的更新？我不想将代码添加到组件中，指令应该负责该逻辑，例如Angular1中的$watch。

Answer 1

您可以在MaxDateDirective中使用Angular生命周期挂钩OnChanges，以便您观看＆＃34;观看＆＃34;对@Input() set maxDate(max: any)进行更改并根据需要对其进行响应，例如使用新的最大日期值执行maxDate()。你可以像这样挂钩OnChanges：

@Directive({
    selector: '[maxDate]'
})

export class MaxDateDirective implements OnChanges {
    private domElement: any;

    @Input() set maxDate(max: any) {
        if (max) {
            $(this.domElement).data("DateTimePicker").maxDate(max);
        }
    }

    constructor(private element: ElementRef, private renderer: Renderer) {
        this.domElement = element.nativeElement;
    }

    ngOnChanges(changes: SimpleChanges) {
        $(this.domElement).data("DateTimePicker").maxDate(changes.maxDate.currentValue);
    }
}

传递给ngOnChanges()的对象提供了您可以使用的其他值，例如以前的值。

这是一个Plunker，简单地展示了它的外观。

希望这有帮助！

Angular2更新指令输入

1 个答案: