angular 【子组件向父组件的父组件传值】 【 @Input() + set 约束属性的设置和获取】

  private _studyId: BehaviorSubject<string> = new BehaviorSubject('');
  @Input()
  get studyId() {
    return this._studyId.value;
  }
  set studyId(value: string) {
    this._studyId.next(value);
    console.log(value)
  }

 

---

setter 和 getter 是用来约束属性的设置和获取，它们提供了一些属性读写的封装，可以让代码更便捷，更具可扩展性。通过 setter 和 getter 方式，我们对类中的私有属性进行了封装，能避免外界操作影响到该私有属性。此外通过 setter 我们还可以封装一些业务逻辑。

// get set 的测试


// 子 ts
  _allowDays: number = 0;
  biggerThanTen: boolean = false;
  @Input()
  set allowDays(val: number) {
    console.log('allowDays = ' + val);
    this._allowDays = val;
    this.biggerThanTen = val > 3;
    console.log(this.biggerThanTen);
  }
  get allowDays() {
    return this._allowDays;
  }
  count() {
    this.allowDays++;
    console.log(this.allowDays);
  }
}

<div (click)="count()">count</div>
{{ allowDays }}

打印：

 

 ------------------------

@Input() + set

// 子组件

// ts
  clickTest() {
    console.log('i am child');
  }
  _allowDays: any;
  @Input()
  set allowDays(val: string) {
    console.log('allowDays = ' + val);
    this._allowDays = val;
    this.clickTest();
  }
  get allowDays() {
    return this._allowDays;
  }

// html
{{_allowDays}} {{allowDays}}

// 父组件

// ts
val: string = 'from father';

// html
 <app-time-controller
    [allowDays]="val"
  ></app-time-controller>

控制台打印：