1# IsolatedComponent (系统接口)
2
3IsolatedComponent用于支持在本页面内嵌入显示独立Abc（.abc文件）提供的UI，展示的内容在受限worker线程中运行。
4
5通常用于有Abc热更新诉求的模块化开发场景。
6
7> **说明：**
8>
9> 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
10>
11> 本模块为系统接口。
12
13## 使用约束
14
15**规格约束**
16
171、本组件不支持预览。
18
192、Abc需要[VerifyAbc](../../apis-ability-kit/js-apis-bundleManager.md#bundlemanagerverifyabc11)校验通过之后才可以使用于当前组件。
20
213、不支持构造参数更新，仅首次传入有效。
22
234、不支持IsolatedComponent组件嵌套场景。
24
25**体验约束**
26
271、创建IsolatedComponent组件时，受限worker线程加载Abc布局渲染存在一定耗时，在此等待期间显示IsolatedComponent组件的背景色。
28
292、主线程与受限worker线程之间布局渲染是异步处理，布局变化、旋转等导致的页面变化存在不同步现象。
30
313、主线程与受限worker线程之间事件传递是异步处理，不支持线程之间的事件冒泡，线程之间的UI交互存在事件冲突现象。
32
33**安全约束**
34
351、独立Abc通过IsolatedComponent组件嵌入式显示在宿主进程，即可说明其Abc内容完全向宿主开放，宿主有权操作独立Abc的内容，对此安全敏感场景禁用。
36
372、独立Abc运行在受限worker可保证相对安全，独立Abc内容不影响主线程。
38
39## 子组件
40
41无
42
43## 接口
44
45IsolatedComponent(options: IsolatedOptions)
46
47创建IsolatedComponent组件，用于显示受限worker运行的Abc。
48
49**参数：**
50
51| 参数名                | 参数类型                                                   | 必填 | 参数描述           |
52| --------------------- | ---------------------------------------------------------- | ---- | ------------------ |
53| options | [IsolatedOptions](#isolatedoptions)                | 是   | 需要传递的构造项。 |
54
55## IsolatedOptions
56用于在IsolatedComponent进行构造的时候，传递可选的构造参数。
57
58**参数：**
59
60| 参数名               | 参数类型                                 | 必填 | 参数描述                                                                                                      |
61| ----                 | ---------------------------------------- | ---- | ---------------                                                                                               |
62| want | [Want](../../apis-ability-kit/js-apis-app-ability-want.md)                                  | 是   | 要加载的Abc信息。 |
63| worker | [RestrictedWorker](../../apis-arkts/js-apis-worker.md#restrictedworker11)       | 是   | 运行Abc的受限worker。 |
64
65## 属性
66仅支持[width](ts-universal-attributes-size.md#width)、[height](ts-universal-attributes-size.md#height)、[backgroundColor](ts-universal-attributes-background.md#backgroundcolor)通用属性
67
68## 事件
69
70不支持[通用事件](ts-universal-events-click.md)。
71
72将事件经过坐标转换后异步传递给受限worker线程处理。
73
74支持以下事件：
75
76### onError
77
78onError(callback:ErrorCallback)
79
80被拉起的Ability扩展在运行过程中发生异常时触发本回调。可通过回调参数中的code、name和message获取错误信息并做处理。
81
82**参数：**
83
84| 参数名                       | 类型   | 说明                                                         |
85| ---------------------------- | ------ | ------------------------------------------------------------ |
86| callback                        | [ErrorCallback](../../apis-basic-services-kit/js-apis-base.md#errorcallback) | 报错信息。    |
87
88## 示例
89
90本示例仅展示组件使用的方法。
91
92```ts
93// OhCardWorker.ets
94import { worker, ThreadWorkerGlobalScope, MessageEvents, ErrorEvent } from '@kit.ArkTS';
95const workerPort: ThreadWorkerGlobalScope = worker.workerPort;
96
97workerPort.onmessage = (e: MessageEvents) => {}
98workerPort.onmessageerror = (e: MessageEvents) => {}
99workerPort.onerror = (e: ErrorEvent) => {}
100```
101
102```ts
103// Index.ets
104import { worker } from '@kit.ArkTS';
105import { bundleManager } from '@kit.AbilityKit';
106
107@Entry
108@Component
109struct Index2 {
110  @State isShow: boolean = false;
111  worker ?: worker.RestrictedWorker;
112  resourcePath : string = "";
113  abcPath : string = "";
114  entryPoint : string = "";
115  fileName: string = "Index"
116
117  build() {
118    Row() {
119      Column() {
120        // 1、 将应用沙箱下的/data/storage/el2/haps/entry/files/Index.abc 调用verifyAbc校验
121        Button("verifyAbc").onClick(()=>{
122          let abcFilePath = getContext(this).filesDir + "/" + this.fileName + ".abc";
123          bundle.verifyAbc([abcFilePath], false);
124        }).height(100).width(100)
125
126        // 2、显示IsolatedComponent
127        Button("showIsolatedComponent").onClick(()=>{
128          if (!this.isShow) {
129            this.worker = new worker.RestrictedWorker("./OhCardWorker");
130            // /data/storage/el2/haps/entry/files/{fileName}.hap
131            this.resourcePath = getContext(this).filesDir + "/" + this.fileName + '.hap';
132            // /abcs/data/storage/el2/haps/entry/files/{fileName}.hap
133            this.abcPath = "/abcs" + getContext(this).filesDir + "/" + this.fileName;
134            this.entryPoint = "com.ohos.test/entry/ets/pages/Index"
135            this.isShow = true;
136          }
137        }).height(100).width(100)
138
139        if (this.isShow) {
140          IsolatedComponent({
141            want: {
142              "parameters" : {
143                "resourcePath" : this.resourcePath,
144                "abcPath" : this.abcPath,
145                "entryPoint" : this.entryPoint
146              }
147            },
148            "worker" : this.worker
149          }).width(300).height(300).onError((err)=>{
150            console.info("onError : " + JSON.stringify(err));
151          })
152        }
153      }
154      .width('100%')
155    }
156    .height('100%')
157  }
158}
159
160```
161