中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
undefined 'titleReceive':constructor: source variable in parent/ancestor @component must be defined. Application error
微信扫码分享
import { UIContext } from '@kit.ArkUI'; import { webview } from '@kit.ArkWeb'; import { NodeController, BuilderNode, Size, FrameNode } from '@kit.ArkUI'; class Data { url: string = "www.index.com"; title: string = "国泰min安"; controller: WebviewController = new webview.WebviewController(); } @Component struct WebComponent1 { @Prop data: Data; build() { RelativeContainer() { Text(this.data.title+'111').margin(20) WebComponent2({ data: this.data }) } } } @Component struct WebComponent2 { @Link data: Data; build() { Stack() { Button('update title').onClick(() => { this.data.title = 'joshgjsd'; }).margin(30) // Web({ src: this.data.url, controller: this.data.controller }) // .domStorageAccess(true) // .zoomAccess(true) // .fileAccess(true) // .mixedMode(MixedMode.All) // .width("100%") // .height("100%") } } } @Builder function WebBuilder(data: Data) { Column() { WebComponent1({ data: data }) } } let wrap = wrapBuilder<Data[]>(WebBuilder); // 用于控制和反馈对应的NodeContainer上的节点的行为,需要与NodeContainer一起使用 export class myNodeController extends NodeController { private rootnode: BuilderNode<Data[]> | null = null; private root: FrameNode | null = null; // 必须要重写的方法,用于构建节点数、返回节点挂载在对应NodeContainer中 // 在对应NodeContainer创建的时候调用、或者通过rebuild方法调用刷新 makeNode(uiContext: UIContext): FrameNode | null { console.log(" uicontext is undifined : " + (uiContext === undefined)); if (this.rootnode != null) { const parent = this.rootnode.getFrameNode()?.getParent(); if (parent) { console.info(JSON.stringify(parent.getInspectorInfo())); parent.removeChild(this.rootnode.getFrameNode()); this.root = null; } this.root = new FrameNode(uiContext); this.root.appendChild(this.rootnode.getFrameNode()); // 返回FrameNode节点 return this.root; } // 返回null控制动态组件脱离绑定节点 return null; } // 当布局大小发生变化时进行回调 aboutToResize(size: Size) { console.log("aboutToResize width : " + size.width + " height : " + size.height) } // 当controller对应的NodeContainer在Appear的时候进行回调 aboutToAppear() { console.log("aboutToAppear") } // 当controller对应的NodeContainer在Disappear的时候进行回调 aboutToDisappear() { console.log("aboutToDisappear") } // 此函数为自定义函数,可作为初始化函数使用 // 通过UIContext初始化BuilderNode,再通过BuilderNode中的build接口初始化@Builder中的内容 initWeb(url: string, uiContext: UIContext, control: WebviewController) { if (this.rootnode != null) { return; } // 创建节点,需要uiContext this.rootnode = new BuilderNode(uiContext) // 创建动态Web组件 this.rootnode.build(wrap, { url: url, controller: control }) } } // 创建Map保存所需要的NodeController let NodeMap: Map<string, myNodeController | undefined> = new Map(); // 创建Map保存所需要的WebViewController let controllerMap: Map<string, WebviewController | undefined> = new Map(); // 初始化需要UIContext 需在Ability获取 export const createNWeb = (url: string, uiContext: UIContext) => { // 创建NodeController let baseNode = new myNodeController(); let controller = new webview.WebviewController(); // 初始化自定义web组件 baseNode.initWeb(url, uiContext, controller); controllerMap.set(url, controller) NodeMap.set(url, baseNode); } // 自定义获取NodeController接口 export const getNWeb = (url: string): myNodeController | undefined => { return NodeMap.get(url); } //Index.ets import { getNWeb } from './myNodeController'; // 使用NodeController的Page页 // Index.ets @Entry @Component struct Index { build() { Row() { Column() { NodeContainer(getNWeb("www.huawei.com")) .height("90%") .width("100%") } .width('100%') } .height('100%') } }