Angular2更新指令输入

Posted 2023-02-22

【中文标题】Angular2更新指令输入

【英文标题】：Angular2 update Directive Input

【发布时间】：2017-12-14 11:29:05

【问题描述】：

我有一个 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。

【参考方案1】：

您可以在 MaxDateDirective 中使用 Angular 生命周期钩子 OnChanges，这将允许您“监视”对 @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，以简单的方式展示了它的外观。

希望对您有所帮助！

【讨论】：

我试过这个，但是当我在 toDate 选择器中选择一个新值时，ngOnChanges 永远不会触发......就像 [maxDate]="filters.today" 没有查看filters.today 变化

如果您将 filters.today 放在页面上，当您选择不同的日期时，您是否看到插值发生变化？

是的......问题是我的日期选择器没有更新我的 ngModel。等我修好了，我会通知你的。谢谢！

您可以尝试生命周期挂钩 DoCheck 来尝试检测更改并有选择地执行 jQuery DatePicker 功能和/或尝试将 filters.today 展平为一个单独的类属性 today 这应该会有所帮助变化检测。

这就是我修复它的方法。感谢您的时间！ ***.com/questions/36087762/…