【Angular】Angular子组件接受参数时使用set、get

1. @Input来接受父组件传值—及获及用

angular子组件中使用@Input来接受父组件传值，最常见的是“及获及用”，代码如下：
父组件parent

nameCon: 'yyy' //ts中
<app-child [name]="nameCon"></app-child> //html中

子组件child

import { Input } from '@angular/core';
@Input() name: string;  //子组件接受name

子组件或指令中的 @Input()装饰器表示该属性可以从其父组件中获取值。
要想监视@Input()属性的变化，你可以使用 Angular 的生命周期钩子OnChanges 。
但上述方法，对于接收到的值都是，收到就使用。如果想对接收到参数进行一些处理 ，或者是根据参数执行不同操作。这个时候可以使用set和get方法。

2. 对接受的值进行再次处理

父组件parent

nameCon: 'yyy' //ts中
<app-child [name]="nameCon"></app-child> //html中

子组件child

//ts文件中
import { Input } from '@angular/core';
private nameStr: string;  // 从父组件传过来的name值，进行大写转化，被重新赋值的参数
@Input()
  set name(value: string) {
    this.nameStr = value.toUpperCase();
  }
  get name(): string {
    return this.nameStr;
  }


{{ name }}  //html中YYY

要重命名一个参数用来承接被处理后的值。因为同名会报错error：超过了最大堆栈大小.

3.根据不同的参数结果执行不同的方法

我将在父组件中创建一个Select，从而达到传给子组件不同值的效果

父组件parent

<form [formGroup]="validateForm">
   <nz-form-item>
        <nz-form-label>城市</nz-form-label>
        <nz-form-control>
          <nz-select
            formControlName="optionCity"
            nzAllowClear
            nzPlaceHolder="请任意选择一个城市"
            (ngModelChange)="changed($event)"
          >
            <nz-option nzValue="1" nzLabel="北京"></nz-option>
            <nz-option nzValue="2" nzLabel="上海"></nz-option>
            <nz-option nzValue="3" nzLabel="广州"></nz-option>
          </nz-select>
        </nz-form-control>
    </nz-form-item>
</form>

<app-child [selectedValue]="optionCity"></app-child>

import { FormBuilder, FormGroup } from '@angular/forms';
optionCity = '1'; // 默认北京
constructor(private fb: FormBuilder) { }

ngOnInit() {
  this.validateForm = this.fb.group({
    optionCity: [this.optionCity, []]
  });
}

changed(value: string): void {
    this.optionCity = value;
}

子组件child

import { Input } from '@angular/core';

private _selectedValue: string;

@Input()
  set selectedValue(value: string) {
    this._selectedValue = value;
    if (this._selectedValue === '1') {
      this.aaa();
    } else if (this._selectedValue === '2') {
      this.bbb();
    } else {
      this.ccc();
    }
  }
  get selectedValue(): string {
    return this._selectedValue;
  }
aaa() {
   console.log('aaaaaaaaaaaaaaaaaaa');
}
bbb() {
   console.log('bbbbbbbbbbbbbbbbbbb');
}
ccc() {
   console.log('ccccccccccccccccccc');
}

如果你在父组件中的select下拉框改变了选项值，那么子组件这里就会相对应的执行相对应的操作

https://blog.csdn.net/qq_39961695/article/details/108196614