Jquery Angular2更新指令输入

我有一个Angular2指令，它像这样设置我的日期选择器的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;
    }
}

                    <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>

在我的组件中，dateFrom和dateTo都是这样的

@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;
    }
}

                    <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>

{{'START_DATE'{124; translate}}
{{'END_DATE'{124; translate}}

---

因此，我的fromDate选择器有一个过滤器。today“，它绑定到toDate选择器的过滤器。today“，但是我的

@Input（）set maxDate（max:any）

只触发一次。如何从指令内部检查组件中的模型更新？我不想向组件添加代码，该指令应该负责该逻辑，如Angular1中的

$watch

。

您可以利用

MaxDateDirective

中的Angular lifecycle钩子，它允许您“监视”对

@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);
    }
}

传递给

ngochanges（）

的对象提供了可以利用的其他值，如前一个值

下面是一个简单的演示，演示了它的外观

---

希望这有帮助

我已经尝试过了，但是当我在toDate选择器中选择一个新值时，ngOnChanges永远不会触发…就像[maxDate]=“filters.today”没有查看过滤器。today更改如果在页面上放置{{filters.today}，当你选择一个不同的日期时，你看到插值改变了吗？是的…问题是我的日期选择器没有更新我的模型。我一修好就告诉你。谢谢您可以尝试lifecycle hook

DoCheck

来检测更改，并有选择地执行jQuery DatePicker功能和/或尝试平坦化

过滤器。今天

只处理一个单独的类属性

today

，希望这有助于更改检测。这就是我修复它的方法。谢谢你抽出时间！