angular 8版本以上使用qiankun

最新推荐文章于 2024-08-27 18:07:45 发布

一支一支杨桃枝

最新推荐文章于 2024-08-27 18:07:45 发布

阅读量235

点赞数

文章标签： angular.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_43527485/article/details/129810953

版权

在Angular8+项目中使用qiankun进行微前端开发，需安装qiankun，配置主应用和子应用。主应用需在main.ts中引入qiankun并注册子应用，子应用需配置shareAppScope共享状态。通过访问特定路径，qiankun自动加载子应用。

摘要由CSDN通过智能技术生成

在使用Angular 8及以上版本的项目中使用qiankun，需要按照以下步骤进行操作：

安装qiankun

在Angular项目中安装qiankun需要使用npm包管理器，在命令行中执行以下命令：

npm install qiankun --save

配置主应用

在Angular项目中的主应用（即父应用）中，需要在main.ts文件中引入qiankun并进行相关配置，具体代码如下：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
import { registerMicroApps, start } from 'qiankun'; // 引入qiankun相关组件

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => {
    // 注册子应用
    registerMicroApps([
      {
        name: 'sub-app-1',
        entry: '//localhost:4201', // 子应用的入口地址，可以是本地或者远程地址
        container: '#subapp-container', // 子应用的DOM容器
        activeRule: '/sub-app-1', // 激活子应用的路由规则，可以是字符串或者正则表达式
      },
      {
        name: 'sub-app-2',
        entry: '//localhost:4202',
        container: '#subapp-container',
        activeRule: '/sub-app-2',
      }
    ]);

    // 启动qiankun
    start();
  })
  .catch(err => console.error(err));

需要注意的是，需要在index.html文件中提前定义好子应用的DOM容器，例如：

<body>
  <app-root></app-root>
  <div id="subapp-container"></div>
</body>

配置子应用

在Angular项目中的子应用中，需要在main.ts文件中进行相关配置，具体代码如下：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
import { shareAppScope } from 'qiankun'; // 引入qiankun相关组件

if (environment.production) {
  enableProdMode();
}

const app = platformBrowserDynamic();
if (environment.production) {
  enableProdMode();
}
shareAppScope(['store']); // 共享状态

app.bootstrapModule(AppModule)
  .catch(err => console.error(err));


// 导出子应用生命周期钩子
export const bootstrap = () => {
  console.log('sub-app-1 bootstraped');
};
export const mount = () => {
  console.log('sub-app-1 mounted');
};
export const unmount = () => {
  console.log('sub-app-1 unmounted');
};

需要注意的是，需要使用shareAppScope方法来共享状态，该方法需要传入一个数组，里面的元素是要共享的状态名称。