Angular2 @Input cho một thuộc tính với get / set

Tôi có một thành phần Angular2 trong thành phần đó, hiện tại nó có một trường bó có @Input () được áp dụng trước chúng để cho phép liên kết với thuộc tính đó, tức là

@Input() allowDay: boolean;

Những gì tôi muốn làm là thực sự liên kết với một thuộc tính bằng get / set, để tôi có thể thực hiện một số logic khác trong setter, đại loại như sau

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
set allowDay(value: boolean) {
     this._allowDay = value;
     this.updatePeriodTypes();
}

Làm thế nào tôi có thể làm điều này trong Angular2?

Dựa trên đề xuất của Thierry Templier, tôi đã thay đổi nó, nhưng điều đó gây ra lỗi Không thể liên kết với 'allowDay' vì đây không phải là một tài sản bản địa đã biết:

//@Input() allowDay: boolean;
_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
@Input('allowDay') set allowDay(value: boolean) {
    this._allowDay = value;
    this.updatePeriodTypes();
}

Bạn có thể đặt trực tiếp @Input trên setter, như được mô tả bên dưới:

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}

@Input('allowDay')
set allowDay(value: boolean) {
    this._allowDay = value;
    this.updatePeriodTypes();
}

Xem plunkr này: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview .

Nếu bạn chủ yếu quan tâm đến việc triển khai logic cho setter :

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

// [...]

export class MyClass implements OnChanges {
  @Input() allowDay: boolean;

  ngOnChanges(changes: SimpleChanges): void {
    if(changes['allowDay']) {
      this.updatePeriodTypes();
    }
  }
}

Việc nhập SimpleChangeskhông cần thiết nếu không thay đổi thuộc tính đầu vào nào hoặc nếu bạn chỉ có một thuộc tính đầu vào.

Angular Doc: OnChanges

nếu không thì:

private _allowDay: boolean;

@Input() set allowDay(value: boolean) {
  this._allowDay = value;
  this.updatePeriodTypes();
}
get allowDay(): boolean {
  // other logic
  return this._allowDay;
}

@Paul Cavacas, tôi đã có một vấn đề tương tự và tôi đã giải quyết bằng cách đặt trình Input()trang trí lên trên getter.

  @Input('allowDays')
  get in(): any {
    return this._allowDays;
  }

  //@Input('allowDays')
  // not working
  set in(val) {
    console.log('allowDays = '+val);
    this._allowDays = val;
  }

Xem trình tải này: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview

Đã cập nhật câu trả lời được chấp nhận cho góc 7.0.1 trên stackblitz tại đây: https://stackblitz.com/edit/angular-inputsetter?embed=1&file=src/app/app.component.ts

directiveskhông còn trong các tùy chọn trang trí thành phần. Vì vậy, tôi đã cung cấp chỉ thị phụ cho mô-đun ứng dụng.

cảm ơn bạn @ thierry-templier !