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