diff --git a/zh-cn/application-dev/quick-start/arkts-builderparam.md b/zh-cn/application-dev/quick-start/arkts-builderparam.md index 8151b6e8eb4ed82a4103206871025f18dd6e6488..9e1ca6bc87cce2b06c5cddb8c7f78d9cae79997e 100644 --- a/zh-cn/application-dev/quick-start/arkts-builderparam.md +++ b/zh-cn/application-dev/quick-start/arkts-builderparam.md @@ -34,34 +34,34 @@ - 用父组件自定义构建函数初始化子组件\@BuildParam装饰的方法。 ```ts -@Component -struct Child { - @Builder componentBuilder() { - Text(`Parent builder `) - } + @Component + struct Child { + @Builder componentBuilder() { + Text(`Parent builder `) + } - @BuilderParam aBuilder0: () => void = this.componentBuilder; + @BuilderParam aBuilder0: () => void = this.componentBuilder; - build() { - Column() { - this.aBuilder0() + build() { + Column() { + this.aBuilder0() + } } } -} -@Entry -@Component -struct Parent { - @Builder componentBuilder() { - Text(`Parent builder `) - } + @Entry + @Component + struct Parent { + @Builder componentBuilder() { + Text(`Parent builder `) + } - build() { - Column() { - Child({ aBuilder0: this.componentBuilder }) + build() { + Column() { + Child({ aBuilder0: this.componentBuilder }) + } } } -} ``` @@ -74,40 +74,40 @@ struct Parent { > 开发者谨慎使用bind改变函数调用的上下文,可能会使this指向混乱。 ```ts -@Component -struct Child { - @Builder componentBuilder() { - Text(`Child builder `) - } + @Component + struct Child { + @Builder componentBuilder() { + Text(`Child builder `) + } - label: string = `Child` - @BuilderParam aBuilder0: () => void = this.componentBuilder; - @BuilderParam aBuilder1: () => void = this.componentBuilder; + label: string = `Child` + @BuilderParam aBuilder0: () => void = this.componentBuilder; + @BuilderParam aBuilder1: () => void = this.componentBuilder; - build() { - Column() { - this.aBuilder0() - this.aBuilder1() + build() { + Column() { + this.aBuilder0() + this.aBuilder1() + } } } -} -@Entry -@Component -struct Parent { - label: string = `Parent` + @Entry + @Component + struct Parent { + label: string = `Parent` - @Builder componentBuilder() { - Text(`${this.label}`) - } + @Builder componentBuilder() { + Text(`${this.label}`) + } - build() { - Column() { - this.componentBuilder() - Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder }) + build() { + Column() { + this.componentBuilder() + Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder }) + } } } -} ``` diff --git a/zh-cn/application-dev/quick-start/arkts-localstorage.md b/zh-cn/application-dev/quick-start/arkts-localstorage.md index 63b1c53b398e851c7d5923f006a8743fbeef72a7..526a72137d547f20c8f61863dc2bfeda1256fa12 100644 --- a/zh-cn/application-dev/quick-start/arkts-localstorage.md +++ b/zh-cn/application-dev/quick-start/arkts-localstorage.md @@ -191,37 +191,37 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 - \@LocalStorageLink绑定LocalStorage对给定的属性,建立双向数据同步。 ```ts -// 创建新实例并使用给定对象初始化 -let storage = new LocalStorage(); -storage['PropA'] = 47; - -@Component -struct Child { - // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定 - @LocalStorageLink('PropA') storLink2: number = 1; - - build() { - Button(`Child from LocalStorage ${this.storLink2}`) - // 更改将同步至LocalStorage中的'PropA'以及Parent.storLink1 - .onClick(() => this.storLink2 += 1) + // 创建新实例并使用给定对象初始化 + let storage = new LocalStorage(); + storage['PropA'] = 47; + + @Component + struct Child { + // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定 + @LocalStorageLink('PropA') storLink2: number = 1; + + build() { + Button(`Child from LocalStorage ${this.storLink2}`) + // 更改将同步至LocalStorage中的'PropA'以及Parent.storLink1 + .onClick(() => this.storLink2 += 1) + } } -} -// 使LocalStorage可从@Component组件访问 -@Entry(storage) -@Component -struct CompA { - // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定 - @LocalStorageLink('PropA') storLink1: number = 1; - - build() { - Column({ space: 15 }) { - Button(`Parent from LocalStorage ${this.storLink1}`) // initial value from LocalStorage will be 47, because 'PropA' initialized already - .onClick(() => this.storLink1 += 1) - // @Component子组件自动获得对CompA LocalStorage实例的访问权限。 - Child() + // 使LocalStorage可从@Component组件访问 + @Entry(storage) + @Component + struct CompA { + // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定 + @LocalStorageLink('PropA') storLink1: number = 1; + + build() { + Column({ space: 15 }) { + Button(`Parent from LocalStorage ${this.storLink1}`) // initial value from LocalStorage will be 47, because 'PropA' initialized already + .onClick(() => this.storLink1 += 1) + // @Component子组件自动获得对CompA LocalStorage实例的访问权限。 + Child() + } } } -} ``` @@ -234,39 +234,39 @@ struct CompA { - Child组件中,Text绑定的storProp2 依旧显示47。 ```ts -// 创建新实例并使用给定对象初始化 -let storage = new LocalStorage(); -storage['PropA'] = 47; - -// 使LocalStorage可从@Component组件访问 -@Entry(storage) -@Component -struct CompA { - // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定 - @LocalStorageProp('PropA') storProp1: number = 1; - - build() { - Column({ space: 15 }) { - // 点击后从47开始加1,只改变当前组件显示的storProp1,不会同步到LocalStorage中 - Button(`Parent from LocalStorage ${this.storProp1}`) - .onClick(() => this.storProp1 += 1) - Child() + // 创建新实例并使用给定对象初始化 + let storage = new LocalStorage(); + storage['PropA'] = 47; + + // 使LocalStorage可从@Component组件访问 + @Entry(storage) + @Component + struct CompA { + // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定 + @LocalStorageProp('PropA') storProp1: number = 1; + + build() { + Column({ space: 15 }) { + // 点击后从47开始加1,只改变当前组件显示的storProp1,不会同步到LocalStorage中 + Button(`Parent from LocalStorage ${this.storProp1}`) + .onClick(() => this.storProp1 += 1) + Child() + } } } -} -@Component -struct Child { - // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定 - @LocalStorageProp('PropA') storProp2: number = 2; + @Component + struct Child { + // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定 + @LocalStorageProp('PropA') storProp2: number = 2; - build() { - Column({ space: 15 }) { - // 当CompA改变时,当前storProp2不会改变,显示47 - Text(`Parent from LocalStorage ${this.storProp2}`) + build() { + Column({ space: 15 }) { + // 当CompA改变时,当前storProp2不会改变,显示47 + Text(`Parent from LocalStorage ${this.storProp2}`) + } } } -} ``` diff --git a/zh-cn/application-dev/quick-start/arkts-mvvm.md b/zh-cn/application-dev/quick-start/arkts-mvvm.md index 8f0a9b1fb98430d34f544c8cc7f0b98b71333ca7..1df7f939eb12e01c165ff1a207883ca1b4533385 100644 --- a/zh-cn/application-dev/quick-start/arkts-mvvm.md +++ b/zh-cn/application-dev/quick-start/arkts-mvvm.md @@ -125,7 +125,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量 ```ts @Component struct LinkLinkChild { - @Link @Watch("testNumChange") testNumGrand: number; + @Link @Watch("testNumChange") testNumGrand: number = 0; testNumChange(propName: string): void { console.log(`LinkLinkChild: testNumGrand value ${this.testNumGrand}`); @@ -139,7 +139,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量 @Component struct PropLinkChild { - @Prop @Watch("testNumChange") testNumGrand: number; + @Prop @Watch("testNumChange") testNumGrand: number = 0; testNumChange(propName: string): void { console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`); @@ -175,7 +175,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量 ```ts @Component struct LinkLinkChild { - @Link @Watch("testNumChange") testNumGrand: number; + @Link @Watch("testNumChange") testNumGrand: number = 0; testNumChange(propName: string): void { console.log(`LinkLinkChild: testNumGrand value ${this.testNumGrand}`); @@ -189,7 +189,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量 @Component struct PropLinkChild { - @Prop @Watch("testNumChange") testNumGrand: number; + @Prop @Watch("testNumChange") testNumGrand: number = 0; testNumChange(propName: string): void { console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`); @@ -277,7 +277,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量 ```ts @Component struct LinkLinkChild { - @Consume @Watch("testNumChange") testNum: number; + @Consume @Watch("testNumChange") testNum: number = 0; testNumChange(propName: string): void { console.log(`LinkLinkChild: testNum value ${this.testNum}`); @@ -290,7 +290,7 @@ struct LinkLinkChild { @Component struct PropLinkChild { - @Prop @Watch("testNumChange") testNumGrand: number; + @Prop @Watch("testNumChange") testNumGrand: number = 0; testNumChange(propName: string): void { console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`); @@ -609,7 +609,7 @@ struct Parent { ```ts @Observed class ObservedArray extends Array { - constructor(args: any[]) { + constructor(args: T[]) { super(...args); } /* otherwise empty */ @@ -686,10 +686,10 @@ struct ViewB { build() { Column() { ForEach(this.arrA, - (item) => { + (item: ClassA) => { ViewA({ label: `#${item.id}`, a: item }) }, - (item) => item.id.toString() + (item: ClassA) => item.id.toString() ) Divider().height(10) @@ -875,9 +875,9 @@ export class Person { ```ts @Observed export class ObservedArray extends Array { - constructor(args?: any[]) { + constructor(args: T[]) { console.log(`ObservedArray: ${JSON.stringify(args)} `) - if (Array.isArray(args)) { + if (args instanceof Array) { super(...args); } else { super(args) @@ -916,13 +916,12 @@ export class ObservedArray extends Array { Divider().height(8) - ForEach(this.contacts, - contact => { - PersonView({person: contact, phones: contact.phones, selectedPerson: this.$selectedPerson}) - }, - contact => contact.id_ - ) - + ForEach(this.contacts, (contact: Person) => { + PersonView({ person: contact, phones: contact.phones as ObservedArray, selectedPerson: this.$selectedPerson }) + }, + (contact: Person) => contact.id_ + ) + Divider().height(8) Text("Edit:") @@ -971,7 +970,7 @@ export class ObservedArray extends Array { build() { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { Text(this.person.name) - if (this.phones.length) { + if (this.phones.length > 0) { Text(this.phones[0]) } } @@ -1005,12 +1004,12 @@ export class ObservedArray extends Array { @Link selectedPerson: Person; /*在本地副本上编辑,直到点击保存*/ - @Prop name: string; - @Prop address : Address; - @Prop phones : ObservedArray; + @Prop name: string = ""; + @Prop address : Address = new Address("", 0, ""); + @Prop phones : ObservedArray = []; selectedPersonIndex() : number { - return this.addrBook.contacts.findIndex((person) => person.id_ == this.selectedPerson.id_); + return this.addrBook.contacts.findIndex((person: Person) => person.id_ == this.selectedPerson.id_); } build() { @@ -1031,24 +1030,24 @@ export class ObservedArray extends Array { TextInput({text: this.address.zip.toString()}) .onChange((value) => { - const result = parseInt(value); - this.address.zip= isNaN(result) ? 0 : result; + const result = Number.parseInt(value); + this.address.zip= Number.isNaN(result) ? 0 : result; }) - if(this.phones.length>0) { - ForEach(this.phones, - (phone, index) => { - TextInput({text: phone}) - .width(150) - .onChange((value) => { - console.log(`${index}. ${value} value has changed`) - this.phones[index] = value; - }) - }, - (phone, index) => `${index}-${phone}` - ) + if (this.phones.length > 0) { + ForEach(this.phones, + (phone: ResourceStr, index?:number) => { + TextInput({ text: phone }) + .width(150) + .onChange((value) => { + console.log(`${index}. ${value} value has changed`) + this.phones[index!] = value; + }) + }, + (phone: ResourceStr, index?:number) => `${index}-${phone}` + ) } - + Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { Text("Save Changes") .onClick(() => { @@ -1103,25 +1102,25 @@ export class ObservedArray extends Array { // ViewModel classes let nextId = 0; - + @Observed export class ObservedArray extends Array { - constructor(args?: any[]) { + constructor(args: T[]) { console.log(`ObservedArray: ${JSON.stringify(args)} `) - if (Array.isArray(args)) { + if (args instanceof Array) { super(...args); } else { super(args) } } } - + @Observed export class Address { street: string; zip: number; city: string; - + constructor(street: string, zip: number, city: string) { @@ -1130,14 +1129,14 @@ export class ObservedArray extends Array { this.city = city; } } - + @Observed export class Person { id_: string; name: string; address: Address; phones: ObservedArray; - + constructor(name: string, street: string, zip: number, @@ -1154,13 +1153,13 @@ export class ObservedArray extends Array { export class AddressBook { me: Person; contacts: ObservedArray; - + constructor(me: Person, contacts: Person[]) { this.me = me; this.contacts = new ObservedArray(contacts); } } - + //渲染出Person对象的名称和Observed数组中的第一个号码 //为了更新电话号码,这里需要@ObjectLink person和@ObjectLink phones, //不能使用this.person.phones,内部数组的更改不会被观察到。 @@ -1170,7 +1169,7 @@ export class ObservedArray extends Array { @ObjectLink person: Person; @ObjectLink phones: ObservedArray; @Link selectedPerson: Person; - + build() { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { Text(this.person.name) @@ -1185,26 +1184,26 @@ export class ObservedArray extends Array { }) } } - + // 渲染Person的详细信息 // @Prop装饰的变量从父组件AddressBookView深拷贝数据,将变化保留在本地, TextInput的变化只会在本地副本上进行修改。 // 点击 "Save Changes" 会将所有数据的复制通过@Prop到@Link, 同步到其他组件 @Component struct PersonEditView { @Consume addrBook: AddressBook; - + /* 指向父组件selectedPerson的引用 */ @Link selectedPerson: Person; - + /*在本地副本上编辑,直到点击保存*/ - @Prop name: string; - @Prop address: Address; - @Prop phones: ObservedArray; - + @Prop name: string = ""; + @Prop address: Address = new Address("", 0, ""); + @Prop phones: ObservedArray = []; + selectedPersonIndex(): number { - return this.addrBook.contacts.findIndex((person) => person.id_ == this.selectedPerson.id_); + return this.addrBook.contacts.findIndex((person: Person) => person.id_ == this.selectedPerson.id_); } - + build() { Column() { TextInput({ text: this.name }) @@ -1215,32 +1214,32 @@ export class ObservedArray extends Array { .onChange((value) => { this.address.street = value; }) - + TextInput({ text: this.address.city }) .onChange((value) => { this.address.city = value; }) - + TextInput({ text: this.address.zip.toString() }) .onChange((value) => { - const result = parseInt(value); - this.address.zip = isNaN(result) ? 0 : result; + const result = Number.parseInt(value); + this.address.zip = Number.isNaN(result) ? 0 : result; }) - + if (this.phones.length > 0) { ForEach(this.phones, - (phone, index) => { + (phone: ResourceStr, index?:number) => { TextInput({ text: phone }) .width(150) .onChange((value) => { console.log(`${index}. ${value} value has changed`) - this.phones[index] = value; + this.phones[index!] = value; }) }, - (phone, index) => `${index}-${phone}` + (phone: ResourceStr, index?:number) => `${index}-${phone}` ) } - + Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { Text("Save Changes") .onClick(() => { @@ -1259,49 +1258,48 @@ export class ObservedArray extends Array { .onClick(() => { let index = this.selectedPersonIndex(); console.log(`delete contact at index ${index}`); - + // 删除当前联系人 this.addrBook.contacts.splice(index, 1); - + // 删除当前selectedPerson,选中态前移一位 index = (index < this.addrBook.contacts.length) ? index : index - 1; - + // 如果contract被删除完,则设置me为选中态 this.selectedPerson = (index >= 0) ? this.addrBook.contacts[index] : this.addrBook.me; }) } } - + } } } - + @Component struct AddressBookView { @ObjectLink me: Person; @ObjectLink contacts: ObservedArray; - @State selectedPerson: Person = undefined; - + @State selectedPerson: Person = new Person("", "", 0, "", []); + aboutToAppear() { this.selectedPerson = this.me; } - + build() { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) { Text("Me:") PersonView({ person: this.me, phones: this.me.phones, selectedPerson: this.$selectedPerson }) - + Divider().height(8) - - ForEach(this.contacts, - contact => { - PersonView({ person: contact, phones: contact.phones, selectedPerson: this.$selectedPerson }) - }, - contact => contact.id_ + + ForEach(this.contacts, (contact: Person) => { + PersonView({ person: contact, phones: contact.phones as ObservedArray, selectedPerson: this.$selectedPerson }) + }, + (contact: Person) => contact.id_ ) - + Divider().height(8) - + Text("Edit:") PersonEditView({ selectedPerson: this.$selectedPerson, @@ -1313,7 +1311,7 @@ export class ObservedArray extends Array { .borderStyle(BorderStyle.Solid).borderWidth(5).borderColor(0xAFEEEE).borderRadius(5) } } - + @Entry @Component struct PageEntry { @@ -1324,7 +1322,7 @@ export class ObservedArray extends Array { new Person("Sam", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]), new Person("Vivi", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]), ]); - + build() { Column() { AddressBookView({ me: this.addrBook.me, contacts: this.addrBook.contacts, selectedPerson: this.addrBook.me }) diff --git a/zh-cn/application-dev/quick-start/arkts-state-management-best-practices.md b/zh-cn/application-dev/quick-start/arkts-state-management-best-practices.md index 2b43630dabee7a29420404f80c963cb8b99d08f7..d52f598d46194893d98f6d2cf03e3613584f3352 100644 --- a/zh-cn/application-dev/quick-start/arkts-state-management-best-practices.md +++ b/zh-cn/application-dev/quick-start/arkts-state-management-best-practices.md @@ -41,7 +41,7 @@ struct LinkChild { @Component struct PropChild2 { - @Prop testNum: ClassA; + @Prop testNum: ClassA = new ClassA(0); build() { Text(`PropChild2 testNum ${this.testNum.c}`) @@ -53,7 +53,7 @@ struct PropChild2 { @Component struct PropChild3 { - @Prop testNum: ClassA; + @Prop testNum: ClassA = new ClassA(0); build() { Text(`PropChild3 testNum ${this.testNum.c}`) @@ -460,10 +460,10 @@ struct ParentComp { CounterComp({ value: this.counter[2] }) Divider().height(5) ForEach(this.counter, - item => { + (item: ParentCounter) => { CounterComp({ value: item }) }, - item => item.id.toString() + (item: ParentCounter) => item.id.toString() ) Divider().height(5) // 第一个点击事件 @@ -576,10 +576,10 @@ struct ParentComp { CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter }) Divider().height(5) ForEach(this.counter, - item => { + (item: ParentCounter) => { CounterComp({ value: item, subValue: item.subCounter }) }, - item => item.id.toString() + (item: ParentCounter) => item.id.toString() ) Divider().height(5) Text('Parent: reset entire counter') @@ -673,10 +673,10 @@ struct ParentComp { CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter }) Divider().height(5) ForEach(this.counter, - item => { + (item: ParentCounter) => { CounterComp({ value: item, subValue: item.subCounter }) }, - item => item.id.toString() + (item: ParentCounter) => item.id.toString() ) Divider().height(5) Text('Parent: reset entire counter') @@ -754,6 +754,37 @@ struct CounterComp { ```ts +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 SubCounterComp { @ObjectLink subValue: SubCounter; @@ -767,7 +798,7 @@ struct SubCounterComp { } @Component struct CounterComp { - @Prop value: ParentCounter; + @ObjectLink value: ParentCounter; build() { Column({ space: 10 }) { Text(`this.value.incrCounter(): this.value.counter: ${this.value.counter}`) @@ -798,10 +829,10 @@ struct ParentComp { CounterComp({ value: this.counter[2] }) Divider().height(5) ForEach(this.counter, - item => { + (item: ParentCounter) => { CounterComp({ value: item }) }, - item => item.id.toString() + (item: ParentCounter) => item.id.toString() ) Divider().height(5) Text('Parent: reset entire counter') @@ -949,15 +980,18 @@ struct CompA { realState1: Array = [4, 1, 3, 2]; // 未使用状态变量装饰器 realState2: Color = Color.Yellow; - updateUI(param: any): any { + updateUI1(param: Array): Array { + const triggerAGet = this.needsUpdate; + return param; + } + updateUI2(param: Color): Color { const triggerAGet = this.needsUpdate; return param; } - build() { Column({ space: 20 }) { - ForEach(this.updateUI(this.realState1), - item => { + ForEach(this.updateUI1(this.realState1), + (item: Array) => { Text(`${item}`) }) Text("add item") @@ -976,7 +1010,7 @@ struct CompA { // 触发UI视图更新 this.needsUpdate = !this.needsUpdate; }) - }.backgroundColor(this.updateUI(this.realState2)) + }.backgroundColor(this.updateUI2(this.realState2)) .width(200).height(500) } } @@ -1005,7 +1039,7 @@ struct CompA { build() { Column({ space: 20 }) { ForEach(this.realState1, - item => { + (item: Array) => { Text(`${item}`) }) Text("add item") @@ -1108,7 +1142,7 @@ struct Parent { @Component struct Child { - @Prop voteOne: ClassE + @ObjectLink voteOne: ClassE build() { Column() { Text(this.voteOne.name).fontSize(24).fontColor(Color.Red).margin(50) @@ -1123,7 +1157,7 @@ struct Child { @Component struct ChildOne { - @Prop voteTwo: ClassD + @ObjectLink voteTwo: ClassD build() { Column() { Text(this.voteTwo.name).fontSize(24).fontColor(Color.Red).margin(50) @@ -1138,7 +1172,7 @@ struct ChildOne { @Component struct ChildTwo { - @Prop voteThree: ClassC + @ObjectLink voteThree: ClassC build() { Column() { Text(this.voteThree.name).fontSize(24).fontColor(Color.Red).margin(50) @@ -1153,7 +1187,7 @@ struct ChildTwo { @Component struct ChildThree { - @Prop voteFour: ClassB + @ObjectLink voteFour: ClassB build() { Column() { Text(this.voteFour.name).fontSize(24).fontColor(Color.Red).margin(50) @@ -1168,7 +1202,7 @@ struct ChildThree { @Component struct ChildFour { - @Prop voteFive: ClassA + @ObjectLink voteFive: ClassA build() { Column() { Text(this.voteFive.title).fontSize(24).fontColor(Color.Red).margin(50) @@ -1245,6 +1279,59 @@ class ClassE { 以下组件层次结构呈现的是@Reusable组件复用场景的数据结构。 ```ts +// 以下是嵌套类对象的数据结构。 +@Observed +class ClassA { + public title: string; + + constructor(title: string) { + this.title = title; + } +} + +@Observed +class ClassB { + public name: string; + public a: ClassA; + + constructor(name: string, a: ClassA) { + this.name = name; + this.a = a; + } +} + +@Observed +class ClassC { + public name: string; + public b: ClassB; + + constructor(name: string, b: ClassB) { + this.name = name; + this.b = b; + } +} + +@Observed +class ClassD { + public name: string; + public c: ClassC; + + constructor(name: string, c: ClassC) { + this.name = name; + this.c = c; + } +} + +@Observed +class ClassE { + public name: string; + public d: ClassD; + + constructor(name: string, d: ClassD) { + this.name = name; + this.d = d; + } +} @Entry @Component struct Parent { @@ -1266,9 +1353,9 @@ struct Parent { @Component struct Child { @State voteOne: ClassE = new ClassE('voteOne', new ClassD('OpenHarmony', new ClassC('Hello', new ClassB('World', new ClassA('Peace'))))) - aboutToReuse(params){ - this.voteOne = params + aboutToReuse(params: ClassE) { + this.voteOne = params } build() { Column() { @@ -1287,7 +1374,7 @@ struct Child { @Component struct ChildOne { @State voteTwo: ClassD = new ClassD('voteTwo', new ClassC('Hello', new ClassB('World', new ClassA('Peace')))) - aboutToReuse(params){ + aboutToReuse(params: ClassD){ this.voteTwo = params } build() { @@ -1307,7 +1394,7 @@ struct ChildOne { @Component struct ChildTwo { @State voteThree: ClassC = new ClassC('voteThree', new ClassB('World', new ClassA('Peace'))) - aboutToReuse(params){ + aboutToReuse(params: ClassC){ this.voteThree = params } @@ -1328,7 +1415,7 @@ struct ChildTwo { @Component struct ChildThree { @State voteFour: ClassB = new ClassB('voteFour', new ClassA('Peace')) - aboutToReuse(params){ + aboutToReuse(params: ClassB){ this.voteFour = params } @@ -1349,7 +1436,7 @@ struct ChildThree { @Component struct ChildFour { @State voteFive: ClassA = new ClassA('voteFive') - aboutToReuse(params){ + aboutToReuse(params: ClassA){ this.voteFive = params } diff --git a/zh-cn/application-dev/quick-start/har-package.md b/zh-cn/application-dev/quick-start/har-package.md index 0dbf9a34fd1f68a5a54f5a9297c27fe2a29302cb..991bb3b80f8fb7ee803002a9ef7dfcd3bcb815b8 100644 --- a/zh-cn/application-dev/quick-start/har-package.md +++ b/zh-cn/application-dev/quick-start/har-package.md @@ -75,7 +75,7 @@ index.ets文件是HAR导出声明文件的入口,HAR需要导出的接口, ``` ### 导出ArkUI组件 ArkUI组件的导出方式与ts的导出方式一致,通过`export`导出ArkUI组件,示例如下: -```js +```ts // library/src/main/ets/components/MainPage/MainPage.ets @Component export struct MainPage { @@ -94,13 +94,13 @@ export struct MainPage { } ``` HAR对外暴露的接口,在index.ets导出文件中声明如下所示: -```js +```ts // library/index.ets export { MainPage } from './src/main/ets/components/MainPage/MainPage' ``` ### 导出ts类和方法 通过`export`导出ts类和方法,支持导出多个ts类和方法,示例如下所示: -```js +```ts // library/src/main/ts/test.ets export class Log { static info(msg: string) { @@ -117,7 +117,7 @@ export function func2() { } ``` HAR对外暴露的接口,在index.ets导出文件中声明如下所示: -```js +```ts // library/index.ets export { Log } from './src/main/ts/test' export { func } from './src/main/ts/test' @@ -135,7 +135,7 @@ HAR模块编译打包时会把资源打包到HAR中。在编译构建HAP时,De ### 引用HAR的ArkUI组件 HAR的依赖配置成功后,可以引用HAR的ArkUI组件。ArkUI组件的导入方式与ts的导入方式一致,通过`import`引入HAR导出的ArkUI组件,示例如下所示: -```js +```ts // entry/src/main/ets/pages/index.ets import { MainPage } from "library" @@ -160,7 +160,7 @@ struct Index { ``` ### 引用HAR的类和方法 通过`import`引用HAR导出的ts类和方法,示例如下所示: -```js +```ts // entry/src/main/ets/pages/index.ets import { Log } from "library" import { func } from "library" @@ -186,7 +186,7 @@ struct Index { ``` ### 引用HAR的资源 通过`$r`引用HAR中的资源,例如在HAR模块的`src/main/resources`里添加字符串资源(在string.json中定义,name:hello_har)和图片资源(icon_har.png),然后在Entry模块中引用该字符串和图片资源的示例如下所示: -```js +```ts // entry/src/main/ets/pages/index.ets @Entry @Component