时间：2022-08-11 17:06:01 | 来源：网站运营
时间：2022-08-11 17:06:01 来源：网站运营
Mooa 是一个为 Angular 服务的微前端框架，它是一个基于 single-spa，针对 IE 10 及 IFRAME 优化的微前端解决方案。
在线咨询
angular-cli 来生成相应的应用：ng new hello-world然后添加 mooa 依赖yarn add mooa接着创建一个简单的配置文件 apps.json，放在 assets 目录下：[{ "name": "help", "selector": "app-help", "baseScriptUrl": "/assets/help", "styles": [ "styles.bundle.css" ], "prefix": "help", "scripts": [ "inline.bundle.js", "polyfills.bundle.js", "main.bundle.js" ] }]]接着，在我们的 app.component.ts 中编写相应的创建应用逻辑：mooa = new Mooa({ mode: 'iframe', debug: false, parentElement: 'app-home', urlPrefix: 'app', switchMode: 'coexist', preload: true, includeZone: true});constructor(private renderer: Renderer2, http: HttpClient, private router: Router) { http.get<IAppOption[]>('/assets/apps.json') .subscribe( data => { this.createApps(data); }, err => console.log(err) );}private createApps(data: IAppOption[]) { data.map((config) => { this.mooa.registerApplication(config.name, config, mooaRouter.hashPrefix(config.prefix)); }); const that = this; this.router.events.subscribe((event) => { if (event instanceof NavigationEnd) { that.mooa.reRouter(event); } }); return mooa.start();}再为应用创建一个对应的路由即可：{ path: 'app/:appName/:route', component: HomeComponent}接着，我们就可以创建 Mooa 子应用。git clone https://github.com/phodal/mooa-boilerplate然后执行：npm install在安装完依赖后，会进行项目的初始化设置，如更改包名等操作。在这里，将我们的应用取名为 help。yarn build 就可以构建出我们的应用。dist 目录一下的文件拷贝到主工程的 src/assets/help 目录下，再启动主工程即可。mooaPlatform.navigateTo，具体使用情况如下：mooaPlatform.navigateTo({ appName: 'help', router: 'home'});它将触发一个 MOOA_EVENT.ROUTING_NAVIGATE 事件。而在我们调用 mooa.start() 方法时，则会开发监听对应的事件：window.addEventListener(MOOA_EVENT.ROUTING_NAVIGATE, function(event: CustomEvent) { if (event.detail) { navigateAppByName(event.detail) }})它将负责将应用导向新的应用。关键词：微服,使用
