m310851010 / ngx-wujie

wujie框架angular实现

ngx-wujie

无界微前端angular组件封装

注意: angular项目作为主应用才需要安装此包

使用环境

• angular 9+

快速上手

安装

npm i ngx-wujie -S

引入

// app.module.ts
+ import { WujieModule } from 'ngx-wujie';
@NgModule({
  imports: [
+   WujieModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

使用

<ngx-wujie
    width="100%"
    height="100%"
    name="xxx"
    [url]="xxx"
    [sync]="true"
    [fetch]="fetch"
    [props]="props"
    (beforeLoad)="onBeforeLoad($event)"
    (beforeMount)="onBeforeMount($event)"
    (afterMount)="onAfterMount($event)"
    (beforeUnmount)="onBeforeUnmount($event)"
    (afterUnmount)="onAfterUnmount($event)"
    (event)="onEvent($event)"
></ngx-wujie>

子应用通过$wujie.bus.$emit(event, args)出来的事件都可以直接(event)来监听

实例方法

destroy()

销毁应用并清空缓存和取消事件

<ngx-wujie #app></ngx-wujie>
<button (click)="app.destroy()">销毁应用</button>

静态属性和方法

import { WujieComponent } from 'ngx-wujie';
const { bus, setupApp, preloadApp, destroyApp } = WujieComponent;

bus

同 API

setupApp

同 API

preloadApp

同 API

destroyApp

同 API

其他

更多参考文档 wujie（无界）