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

冷不防 2024-04-17 05:35 44阅读 0赞

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

打印：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

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

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

控制台打印：![20200309173401921.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/0ab92a8ff709458a896fc9d18521ed1f.png
[20200309173401921.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/92cd66be9bdf435ab6623cf9822f12c1.png