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 }}
打印:
------------------------
@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>
控制台打印: