angular子组件接受参数时使用set、get

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

父组件parent

<app-child [name]="nameCon"></app-child>
nameCon: 'Zita'

子组件child

import {
      Input } from '@angular/core';
@Input() name: string;

但是，有的时候，
我们希望对接收到参数进行一些处理后，再展示；
或者只是想根据参数执行不同的方法；
…
而这些需求都是可以直接在接收参数的时候直接处理和执行的。
那么，今天我们来聊一聊在接受父组件传参的时候，我们在子组件中使用set和get进行处理参数的情况！

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

父组件parent

 <app-child [name]="nameCon"></app-child>
 nameCon: 'Zita'

子组件child

html
{
     {
      name }}  //ZITA
 
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;
  }

可能有的朋友会疑惑，为什么要重命名一个参数用来承接被处理后的值。因为同名会报错呀…

error：超过了最大堆栈大小

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

我将在父组件中创建一个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('aaaaaaaaaaaaaaaaaaaaa');
}
bbb() {
     
   console.log('bbbbbbbbbbbbbbbbbbb');
}
ccc() {
     
   console.log('cccccccccccccccccc');
}

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

至此，以上就是我根据实例进而解锁set和get的用法的一些理解。
Happy ending~~