【鸿蒙实战开发】@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变革 - ToB企服应用市场:ToB评测及商务社交产业平台

@Observed
class Person{
name:string
age:number
gf:Person
constructor(name:string,age:number,gf?:Person){
this.name=name
this.age=age
this.gf=gf
}
}
@Component
struct Child{
@ObjectLink p:Person
build() {
Column(){
Text(`${this.p.name}:${this.p.age}`)
}
}
}
@Entry
@Component
struct Parent{
@State p:Person=new Person('Tom',21,new Person('Rose',18))
@State gfs:Person[]=[new Person('汤姆',16),new Person('路西',18)]
build() {
Column(){
Child({p:this.p.gf})
.onClick(()=>this.p.gf.age++)
Text('-------------------')
ForEach(
this.gfs,
p=>{
Child({p:p}).onClick(()=>this.p.age++)
}
)
}
}
}

复制代码

@Observed
class ClassA {
public c: number = 0;
constructor(c: number) {
this.c = c;
}
}
@Component
struct ObjectLinkChild {
@ObjectLink testNum: ClassA;
build() {
Text(`ObjectLinkChild testNum ${this.testNum.c}`)
.onClick(() => {
// ObjectLink不能被赋值这是不允许的，对于实现双向数据同步的@ObjectLink，赋值相当于要更新父组件中的数组项或者class的属性,这个对于 TypeScript/JavaScript是不能实现的。框架对于这种行为会发生运行时报错。
this.testNum = new ClassA(47);
// 可以对ObjectLink装饰对象的属性赋值
//this.testNum.c = 47;
})
}
}
@Entry
@Component
struct Parent {
@State testNum: ClassA[] = [new ClassA(1)];
build() {
Column() {
Text(`Parent testNum ${this.testNum[0].c}`)
.onClick(() => {
this.testNum[0].c += 1;
})
ObjectLinkChild({ testNum: this.testNum[0] })
}
}
}

复制代码

let nextId = 1;
@Observed
class SubCounter {
counter: number;
constructor(c: number) {
this.counter = c;
}
}
@Observed
class ParentCounter {
id: number;
counter: number;
subCounter: SubCounter;
incrCounter() {
this.counter++;
}
incrSubCounter(c: number) {
this.subCounter.counter += c;
}
setSubCounter(c: number): void {
this.subCounter.counter = c;
}
constructor(c: number) {
this.id = nextId++;
this.counter = c;
this.subCounter = new SubCounter(c);
}
}
@Component
struct CounterComp {
@ObjectLink value: ParentCounter;
build() {
Column({ space: 10 }) {
CountChild({ subValue: this.value.subCounter })
Text(`this.value.counter：increase 7 `)
.fontSize(30)
.onClick(() => {
// click handler, Text(`this.subValue.counter: ${this.subValue.counter}`) will update
this.value.incrSubCounter(7);
})
Divider().height(2)
}
}
}
@Component
struct CountChild {
@ObjectLink subValue: SubCounter;
build() {
Text(`this.subValue.counter: ${this.subValue.counter}`)
.fontSize(30)
}
}
@Entry
@Component
struct ParentComp {
@State counter: ParentCounter[] = [new ParentCounter(1), new ParentCounter(2), new ParentCounter(3)];
build() {
Row() {
Column() {
CounterComp({ value: this.counter[0] })
CounterComp({ value: this.counter[1] })
CounterComp({ value: this.counter[2] })
Divider().height(5)
ForEach(this.counter,
(item: ParentCounter) => {
CounterComp({ value: item })
},
(item: ParentCounter) => item.id.toString()
)
Divider().height(5)
Text('Parent: reset entire counter')
.fontSize(20).height(50)
.onClick(() => {
this.counter = [new ParentCounter(1), new ParentCounter(2), new ParentCounter(3)];
})
Text('Parent: incr counter[0].counter')
.fontSize(20).height(50)
.onClick(() => {
this.counter[0].incrCounter();
this.counter[0].incrSubCounter(10);
})
Text('Parent: set.counter to 10')
.fontSize(20).height(50)
.onClick(() => {
this.counter[0].setSubCounter(10);
})
}
}
}
}

复制代码

@Component
struct CounterComp {
@Prop value: ParentCounter = new ParentCounter(0);
@Prop subValue: SubCounter = new SubCounter(0);
build() {
Column({ space: 10 }) {
Text(`this.subValue.counter: ${this.subValue.counter}`)
.fontSize(20)
.onClick(() => {
// 1st click handler
this.subValue.counter += 7;
})
Text(`this.value.counter：increase 7 `)
.fontSize(20)
.onClick(() => {
// 2nd click handler
this.value.incrSubCounter(7);
})
Divider().height(2)
}
}
}

复制代码