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

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

• • 1. @Input来接受父组件传值---及获及用
  • 2. 对接受的值进行再次处理
  • 3.根据不同的参数结果执行不同的方法

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-selectformControlName="optionCity"nzAllowClearnzPlaceHolder="请任意选择一个城市"(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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！