鸿蒙开发-装饰器@Link问题
正常示例
class Parent {public count: number;constructor( count: number) {this.count = count;} } @Entry @Component struct TestPage {@State parent: Parent = new Parent( 11)build() {Column() {SubComponent({ parent: this.parent })}.height('100%')} } @Component struct SubComponent {@Link parent: Parentbuild() {Text(`${JSON.stringify(this.parent)}`)} } 如上我们正常创建类对象parent,并用@State装饰器,传入子组件@Link修饰的变量上,可以正常运行!
好的,问题来了,往下看
@Entry @Component struct TestPage {@State parent: Parent[] = [new Parent( 11),new Parent( 13)]//注意此处变化build() {Column() {SubComponent({ parent: this.parent[0] })//注意此处变化// ForEach(this.parent,(item:Parent,index:number)=>{//SubComponent({ parent: item })// })}.height('100%')} }@Component struct SubComponent {@Link parent: Parentbuild() {Text(`${JSON.stringify(this.parent)}`).onClick(() => {this.parent.count = 6})} }
上面的代码运行是会报错的
The regular property 'this.parent[0]' cannot be assigned to the @Link property 'parent'.
Error message:is not callable
Stacktrace:
at SynchedPropertyTwoWayPU (/usr1/hmos_for_system/src/increment/sourcecode/foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/stateMgmt.js:5788:1)
at SynchedPropertyObjectTwoWayPU (/usr1/hmos_for_system/src/increment/sourcecode/foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/stateMgmt.js:0:1)
分析原因:
允许父组件中@State、@Link、@Prop、@Provide、@Consume、@ObjectLink、@StorageLink、@StorageProp、@LocalStorageLink和@LocalStorageProp装饰变量初始化子组件@Link修饰的变量,而且父组件传递的变量必须是由上面的装饰器直接装饰的,什么意思呢,结合上面两个例子:
1.第一个示例@State直接修饰我们传递的值
2.第二个示例@State修饰的是数组,传递的是数组中取出的值;或者ForEach循环出来的item
第二种情况是不被允许的!
那么我们实际开发中经常会用到第二种情况,应该怎么办,答案是@Observed+@ObjectLink
正例:
@Observed
class Parent {public count: number;constructor(count: number) {this.count = count;}
}@Entry
@Component
struct TestPage {@State parent: Parent[] = [new Parent(11), new Parent(13)]build() {Column() {SubComponent({ parent: this.parent[0] })ForEach(this.parent, (item: Parent, index: number) => {SubComponent({ parent: item })})}.height('100%')}
}@Component
struct SubComponent {@ObjectLink parent: Parentbuild() {Text(`${JSON.stringify(this.parent)}`).onClick(() => {this.parent.count = 6})}
}