道标
准备好源码，然后跟着文章去看代码，在每个代码块的第一行，我都把 filename 写上了，并且打开了 gitalk。
项目结构
- packages/planet
|--src
|--application
|--planet-application-loader.spec.ts
|--planet-application-loader.ts # 应用加载器
|--planet-application-ref.spec.ts
|--planet-application-ref.ts # 应用的引用
|--planet-application.service.spec.ts
|--planet-application.service.ts # 应用逻辑处理Service
|--portal-application.spec.ts
|--portal-application.ts # Portal应用
|--component
|--planet-component-loader.spec.ts
|--planet-component-loader.ts # 组件加载器
|--planet-component-ref.ts # 组件引用
|--plant-component.config.ts # 组件配置
|--empty
|--empty.component.spec.ts
|--empty.component.ts # 空组件
|--testing
|--app1.module.ts # 测试用例
|--app2.module.ts
|--applications.ts
|--index.ts
|--utils.ts
|--assets-loader.spec.ts
|--assets-loader.ts # 静态资源加载器
|--global-event-dispatcher.spec.ts
|--global-event-dispatcher.ts # 全局事件调度器
|--global-planet.spec.ts
|--global-planet.ts # 一些函数
|--helper.spec.ts
|--helper.ts # 一些util函数
|--module.spec.ts
|--module.ts # packager module
|--planet.class.ts # 注入配置和InjectToken
|--planet.spec.ts
|--planet.ts # planet 对象，包含了注册，启动设置信息，实质为service
|--public-api.ts # 桶
|--test.ts # 测试
|--karma.config.js # test config
|--ng-package.json # packager scheme
|--pakcage.json # npm
|--tsconfig.lib.json # compiler config
|--tsconfig.lib.prod.json # env=prod compiler config
|--tsconfig.spec.json # test copiler config
|--tslint.json # code lint rules
从 Portal 的 AppComponent 开始
// appcomponent.ts
// 首先注入了 planet 对象
constructor(
private planet: Planet,
) {}
// appcomponent.ts
// 初始化AppComponent中配置Portal和Applications
ngOnInit() {
...
}
// appcomponent.ts
// 设置PlanetApplicationLoader应用加载器的options
this.planet.setOptions({
// switchMode
switchMode: SwitchModes.coexist,
// Application资源加载错误处理回调函数
errorHandler: (error) => {
// thy组件库的通知组件，理解成alert吧
this.thyNotify.error(`错误`, "加载资源失败");
},
});
// planet.class.ts
// SiwtchModes枚举类，切换子应用的模式，默认切换会销毁，设置 coexist 后只会隐藏
export enum SwitchModes {
default = "default",
coexist = "coexist",
}
// planet-application-loader.ts
// Injectable直接注到模块里了(唯一),项目启动会通过Factory自行创建,所以不需要初始化
@Injectable({
providedIn: 'root'
})
export class PlanetApplicationLoader {
private firstLoad = true;
private startRouteChangeEvent: PlanetRouterEvent;
// 这里是ApplicationLoader中的option
private options: PlanetOptions
......
}
// appcomponent.ts
// 向planet注册了两个应用
this.planet.registerApps([
{
// 子应用名
name: "app1",
// 应用渲染的容器元素, 指定子应用显示在哪个元素内部
hostParent: "#app-host-container",
// 宿主元素的 Class，也就是在子应用启动组件上追加的样式
hostClass: appHostClass,
// 子应用路由路径前缀，根据这个匹配应用
routerPathPrefix: /\/app1|app4/,
// 脚本和样式文件路径前缀，多个脚本可以避免重复写同样的前缀
resourcePathPrefix: "/static/app1/",
// 是否启用预加载，启动后刷新页面等当前页面的应用渲染完毕后预加载子应用
preload: settings.app1.preload,
// 切换子应用的模式，默认切换会销毁，设置 coexist 后只会隐藏
switchMode: settings.app1.switchMode,
// 是否串行加载脚本静态资源
loadSerial: true,
// 样式前缀
stylePrefix: "app1",
// 脚本资源文件
scripts: ["main.js"],
// 样式资源文件
styles: ["styles.css"],
// 应用程序打包后的脚本和样式文件替换
manifest: "/static/app1/manifest.json",
// 附加数据，主要应用于业务，比如图标，子应用的颜色，显示名等个性化配置
extra: {
name: "应用1",
color: "#ffa415",
},
},
.......
]);
在看 planet.registerApps 之前先看一下 GlobalPlanet
// global-planet.ts
// 浏览器window对象
declare const window: any;
// interface
export interface GlobalPlanet {
// 这里是一个Map,key是String类型的，Value为应用的引用
apps: { [key: string]: PlanetApplicationRef };
// 基座模式，只需要一个Portal
portalApplication?: PlanetPortalApplication;
// 应用加载器
applicationLoader?: PlanetApplicationLoader;
// service,函数
applicationService?: PlanetApplicationService;
}
// 全局变量，如果window.planet不为空那么就拿window.planet的值，不然就初始化一个app的map出来
export const globalPlanet: GlobalPlanet = (window.planet = window.planet || {
apps: {},
});
// 先看一眼，下面会在回来看
export function defineApplication(
name: string,
options: BootstrapAppModule | BootstrapOptions
) {
if (globalPlanet.apps[name]) {
throw new Error(`${name} application has exist.`);
}
if (isFunction(options)) {
options = {
template: "",
bootstrap: options as BootstrapAppModule,
};
}
const appRef = new PlanetApplicationRef(name, options as BootstrapOptions);
globalPlanet.apps[name] = appRef;
}
为了继续看 defineApplication 先看一个用例,这个用例是 app1 的 main.ts 中的
// app1的 main.ts
// 调用defineApplication 传入
// 1. app1,
// 2.函数返回 ModuleRef 启动的模块
defineApplication('app1', {
// template 为一个dom字符串
template: `<app1-root class="app1-root"></app1-root>`,
// bootstrap 应用的加载点
bootstrap: (portalApp: PlanetPortalApplication) => {
// platformBrowserDynamic 传入 Provider, Provider同于 app.module中的providers 提供服务用的，作者在这里插入了两个 值或对象
>>>> export declare const platformBrowserDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
return platformBrowserDynamic([
// 其实提供服务也可以理解成有一个Context,把Value注入到Context中了，在项目中的Context中可以通过Inject方式来提取使用这个服务了
{
provide: PlanetPortalApplication,
// 注意这里传入的是 defineApplication 函数 第二参数options中 BootstrapAppModule中的回调参数
useValue: portalApp
},
...
])
// 引导AppModule模块,创建@NgModule实例也就是创建一个AppModule出来
.bootstrapModule(AppModule)
.then(appModule => {
// 最后返回Promise<NgModule>
// 至此，第二参中的BootstrapAppModule结束
return appModule;
})
.catch(error => {
console.error(error);
return null;
});
}
});
好，现在返回 defineApplication 中去看看用两个参数做了些什么呢
// planet-applicaiton.ref.ts
// 这是第二参的类型
export interface BootstrapOptions {
template: string;
bootstrap: BootstrapAppModule;
}
// 第二参数中 bootstrap 要传入portalApp然后返回NgModuldeRef
export type BootstrapAppModule = (
portalApp?: PlanetPortalApplication
) => Promise<NgModuleRef<any>>;
上面已经讲过怎么用了,下面看当调用时，包内发生了什么?
// global-planet.ts
export function defineApplication(
name: string,
options: BootstrapAppModule | BootstrapOptions
) {
// 首先，看看globalPlanet的app map中有没有加入过这个项目，也就是说，如果有10个应用，调用defineApplication时传入相同的第一参name,就会发生应用重复，无法分别当前需要加载的是哪个应用，作者在这里判断并抛出异常
if (globalPlanet.apps[name]) {
throw new Error(`${name} application has exist.`);
}
// 其次，看options第二参数，是带template的Bootstrap函数还是直接就是bootstrap函数
if (isFunction(options)) {
// 如果是函数，那么template为空，第二参数转化类型,options备用
options = {
template: "",
bootstrap: options as BootstrapAppModule,
};
}
// 这里比较关键了，通过name和options new了一个PlanetApplicationRef对象
const appRef = new PlanetApplicationRef(name, options as BootstrapOptions);
// 将appRef也就是子applicaiton的引用加入globalPlanet.apps的map中，也就是window.planet.apps中,至于为什么，前面有提到
globalPlanet.apps[name] = appRef;
}
看看如何 new 一个子应用引用对象吧~
// planet-application-ref.ts
export class PlanetApplicationRef{
...
private innerSelector: string;
// 这里 将 innerSelector调用方式改为了 app.selector因为是私有变量嘛
public get selector() {
return this.innerSelector;
}
// 首先，构造函数两个参数由defineApplication传递过来
constructor(name: string, options: BootstrapOptions) {
// 传递一些值给当前对象的属性
this.name = name;
if (options) {
this.template = options.template;
// 如果template被传入了 getTagNameByTemplate,由于是util不在赘述，这里拿到了标签名称，稍后看一个应用demo
this.innerSelector = this.template ? getTagNameByTemplate(this.template) : null;
// 将Promise<NgModuleRef>也就是bootstrap Instance也传进来
this.appModuleBootstrap = options.bootstrap;
}
}
作者每一个属性名和变量的词语都非常精准，所以导致看代码的时候非常好看,非常干净,这也是 clean code 第一章所追求的,我所追求的代码风格，非常棒
看一个 selecor 应用 demo
// planet-application-loader.ts
// 首先通过name获取ApplicationRef引用
private hideApp(planetApp: PlanetApplication) {
const appRef = getPlanetApplicationRef(planetApp.name);
// 获取插入的整体dom节点的document,通过selector
const appRootElement = document.querySelector(appRef.selector || planetApp.selector);
// 隐藏dom元素
if (appRootElement) {
appRootElement.setAttribute('style', 'display:none;');
}
}
好了，至此注册内容结束，总体来说就是把 name 和 template 放到 window 下的对象中的 map 里，在提供一个 boostrap 和 angular 的 main.ts 结合起来，将 instance 也存入 map 中
再次回到 Portal 的 appcomponent,这次看细致一些
// portal appcomponent.ts
// 注册了planet
constructor(
private planet: Planet,
) {}
看看初始化 plant 的时候，plant 内部是什么样子的
// planet.ts
// injectable -> context
@Injectable({
providedIn: 'root'
})
export class Planet {
...
// 看这里，当factory向context注入Planet时，发生了什么
constructor(
private injector: Injector,
private router: Router,
// angular 提供InjectToken方式注入值
@Inject(PLANET_APPLICATIONS) @Optional() planetApplications: PlanetApplication[]
// 为了解释，插入一段module.ts的代码
---NgxPlanetModule : module.ts
// 放出NgxPlanetModule
export class NgxPlanetModule {
// 引入模块既可以直接引入也可以NgxPlanetModule.forRoot(apps)
// apps为静态的PlanetApplication集合，其实就是appcomponent中register的那个集合
// 标识为PLANET_APPLICATIONS理解成字符串就好了
// Inject(PLANET_APPLICATIONS)也就是拿到外部模块引用forRoot函数中传入的结合
static forRoot(apps: PlanetApplication[]): ModuleWithProviders<NgxPlanetModule> {
return {
ngModule: NgxPlanetModule,
providers: [
{
provide: PLANET_APPLICATIONS,
useValue: apps
}
]
};
}
}
---
// 回到planet.ts
) {
// 通过injector从context里提取出injectable过的service,注意，全局唯一service
if (!this.planetApplicationService) {
// 注意，这里service给了谁了,给了global下的applicationService,也就是window下的那个对象,这里可以点setApplicationService去看,前面看过globalPlanet了
setApplicationService(this.injector.get(PlanetApplicationService));
}
// 如果forRoot传入了apps，那么注册
if (planetApplications) {
// 调用注册函数
this.registerApps(planetApplications);
}
}
// 由于construct中用injector获得了全局planetApplicationService实例，所以这里直接可以用了
registerApps<TExtra>(apps: PlanetApplication<TExtra>[]) {
// 调用service的注册，将apps在向下传一层
this.planetApplicationService.register(apps);
}
}
看一下 service 中的代码
// planet-application.service.ts
@Injectable({
providedIn: "root",
})
export class PlanetApplicationService {
// PlanetApplication集合
private apps: PlanetApplication[] = [];
// PlanetApplication map
private appsMap: { [key: string]: PlanetApplication } = {};
constructor(private http: HttpClient, private assetsLoader: AssetsLoader) {
// 首先检测 global下的applicationService是不是已经有了，有了就抛异常，因为这里存的是apps列表，所以不能刷新他的引用使它变成新的对象,不然存储的注册application就没有了
if (getApplicationService()) {
throw new Error(
"PlanetApplicationService has been injected in the portal, repeated injection is not allowed"
);
}
}
// 注册
register<TExtra>(
appOrApps: PlanetApplication<TExtra> | PlanetApplication<TExtra>[]
) {
// 单个application转数组,多个application直接返回数组
const apps = coerceArray(appOrApps);
apps.forEach((app) => {
// 判断是否注册过了application了
if (this.appsMap[app.name]) {
throw new Error(`${app.name} has be registered.`);
}
// 将application加入apps数组和map中
this.apps.push(app);
this.appsMap[app.name] = app;
});
}
}
至此，模块启动实例(bootstrap|@NgModule)和注册从 main.ts,portal 的 appcomponent.ts 解析完毕
无论是启动实例或是应用列表，都存在了 global 下面，前一种存到了 apps 下，后一个，存到了 applicationService 的数组和 map 中
第三次回到 portal 的 appcomponent
register 下一行，调用了 start
// appcomponent.ts
// 调用planet的start
this.planet.start();
看看如何写的,这里我加入了一些 console 通过输出的内容分析一下
// plant.ts
start() {
this.subscription = this.router.events
.pipe(
filter(event => {
return event instanceof NavigationEnd;
}),
map((event: NavigationEnd) => {
return event.urlAfterRedirects || event.url;
}),
startWith(location.pathname),
distinctUntilChanged(),
)
.subscribe((url: string) => {
console.log(url)
this.planetApplicationLoader.reroute({
url: url
});
});
}
以下是输出内容
// construct是我在planetApplicationLoader构造函数里加入的console
// 通过顺序验证了，当factory创建好了planetApplicationLoader后会立即执行构造函数中的内容，所以construct排第一
construct
// subscript真正订阅到的路由字符串
planet.ts:103 /about
然后使用 planetApplicationLoader.reroute({}) 去改变了 planetApplicationLoader 中的 private routeChange$ = new Subject<PlanetRouterEvent>();
由于 construct 先运行，所以先来看 planetApplicationLoader 的构造函数进行了什么操作
// planet-application-loader.ts
constructor(
// assetsLoader先不考虑，我猜大概是对应了angular静态资源目录进行操作的一个对象
private assetsLoader: AssetsLoader,
// planetApplicationService 前面看到的service
// 里面有register和app列表
private planetApplicationService: PlanetApplicationService,
// ngZone https://hijiangtao.github.io/2020/01/17/Angular-Zone-Concepts/ 可以看这篇帖子，主要是关于变更检测机制的一个东西
// 简单来说 run runOutsideAngular两个函数，一个是进行变更检测，一个在zone之外运行不触发变更检测
private ngZone: NgZone,
// 路由
router: Router,
// injector
injector: Injector,
// 对页面上运行的angular应用程序的引用
applicationRef: ApplicationRef
) {
// 这里类似planetApplicationService的检测,检测global中是否已经存在了loader加载器
// 那么ApplicationLoader什么时候被创建的呢，看看之前planetApplicationService在哪里创建的，它上面就是setApplicationLoader
if (getApplicationLoader()) {
throw new Error(
'PlanetApplicationLoader has been injected in the portal, repeated injection is not allowed'
);
}
// 设置一些参数
this.options = {
// 应用是隐藏还是销毁
switchMode: SwitchModes.default,
// 错误处理回调函数
errorHandler: (error: Error) => {
console.error(error);
}
};
// 将zone传递给portalApp
this.portalApp.ngZone = ngZone;
// 当前application的引用传递给portalApp
this.portalApp.applicationRef = applicationRef;
// 路由传递
this.portalApp.router = router;
// 这里我理解为把注入器传过来了，也就可以用injector来拿当前context的对象了
// 可能理解有误，请在下方留言告知
this.portalApp.injector = injector;
// 一会儿在看如何共享事件调用的
this.portalApp.globalEventDispatcher = injector.get(GlobalEventDispatcher);
// 将portalApp给global对象了
globalPlanet.portalApplication = this.portalApp;
// 调用了一个关于路由的函数
this.setupRouteChange();
}
先看 this.portalApp 是什么
// planet-application-loader.ts
private portalApp = new PlanetPortalApplication();
new 了一个 portalApplication 对象对吧，这就是我们的基座 application 了，看看里面有什么
// portal-application.ts
export class PlanetPortalApplication<TData = any> {
// 当前应用的引用
applicationRef: ApplicationRef;
// 注入器
injector: Injector;
// 路由
router: Router;
// 变更检测
ngZone: NgZone;
// 事件分发器
globalEventDispatcher: GlobalEventDispatcher;
// 额外数据?
data: TData;
// 跳转函数,返回了一个Promise<boolean>
navigateByUrl(
url: string | UrlTree,
extras?: NavigationExtras
): Promise<boolean> {
return this.ngZone.run(() => {
return this.router.navigateByUrl(url, extras);
});
}
// ngZone.run 在变更检测区域内运行函数，这里不知道为何不 object.ngZone.run而是要写一个函数来包装
run<T>(fn: (...args: any[]) => T): T {
return this.ngZone.run<T>(() => {
return fn();
});
}
// 全局性调用变化检测
// applicationRef可以通过attachView()将视图包含到变化检测中
// 可以用detachView()将视图移除变化检测
tick() {
this.applicationRef.tick();
}
}
好了，接下来看加载应用的核心函数 setupRouteChange 这个函数有点长
// planet-application-loader.ts
private setupRouteChange() {
// 当路由变化时，先思考，application-loader比start调用先创建，所以start后，页面定到/about路由，所以这里可以接收到/about
this.routeChange$
.pipe(
distinctUntilChanged((x, y) => {
return (x && x.url) === (y && y.url);
}),
// 和其他打平操作符的主要区别是它具有取消效果。在每次发出时，会取消前一个内部 observable (你所提供函数的结果) 的订阅，然后订阅一个新的 observable
switchMap(event => {
return of(event).pipe(
// 卸载应用程序并返回应加载的应用程序
map(() => {
// 这里拿到{url:'/about'}
this.startRouteChangeEvent = event;
// 通过url找app ,PlanetApplication类型,用service中的app列表和 注册过的app的routerPathPrefix和url进行匹配
const shouldLoadApps = this.planetApplicationService.getAppsByMatchedUrl(event.url);
// 这里拿到了需要卸载的应用,下面有讲
const shouldUnloadApps = this.getUnloadApps(shouldLoadApps);
// 设置加载和卸载的application,这里传入了加载应用和卸卸载应用，并且放出了ob对象，估计是作者提供hook函数，想提供给我们在loading时做一些操作的自定义函数的hook
// 使用的时候 planet.appsLoadingStart.subscribe就可以拿到了
this.appsLoadingStart$.next({
shouldLoadApps,
shouldUnloadApps
});
// 卸载,下面有讲
this.unloadApps(shouldUnloadApps, event);
return shouldLoadApps;
}),
// 加载静态资源
switchMap(shouldLoadApps => {
let hasAppsNeedLoadingAssets = false;
const loadApps$ = shouldLoadApps.map(app => {
// 获取当前app的状态
const appStatus = this.appsStatus.get(app);
// 如果没有加载过，或者曾经加载错了
// 设置需要加载状态后使用assetsLoader去加载静态资源,稍后讲assetsLoader
if (
!appStatus ||
appStatus === ApplicationStatus.assetsLoading ||
appStatus === ApplicationStatus.loadError
) {
hasAppsNeedLoadingAssets = true;
return this.ngZone.runOutsideAngular(() => {
return this.startLoadAppAssets(app);
});
} else {
return of(app);
}
});
if (hasAppsNeedLoadingAssets) {
this.loadingDone = false;
}
return loadApps$.length > 0 ? forkJoin(loadApps$) : of([] as PlanetApplication[]);
}),
// 引导启动或展示application
map(apps => {
const apps$: Observable<PlanetApplication>[] = [];
apps.forEach(app => {
// 获取app状态
const appStatus = this.appsStatus.get(app);
// 如果引导过了,也就是拿到过context了
if (appStatus === ApplicationStatus.bootstrapped) {
apps$.push(
of(app).pipe(
tap(() => {
// 展示app
this.showApp(app);
// 获取app引用
const appRef = getPlanetApplicationRef(app.name);
// 路由跳转 router是从 applicationRef也就是子application中 inject出来的router,所以路由表完备
appRef.navigateByUrl(event.url);
// 设置app状态为激活状态
this.setAppStatus(app, ApplicationStatus.active);
// 加载结束
this.setLoadingDone();
})
)
);
} else if (appStatus === ApplicationStatus.assetsLoaded) {
// 如果appStatus状态为静态资源加载完毕
apps$.push(
of(app).pipe(
switchMap(() => {
// 引导app获取app context中的一些对象
return this.bootstrapApp(app).pipe(
map(() => {
// 设置app模式为激活状态
this.setAppStatus(app, ApplicationStatus.active);
// 加载完毕
this.setLoadingDone();
return app;
})
);
})
)
);
// 如果应用未激活状态
} else if (appStatus === ApplicationStatus.active) {
apps$.push(
of(app).pipe(
tap(() => {
// 获取引用
const appRef = getPlanetApplicationRef(app.name);
// 获取当前路径
const currentUrl = appRef.getCurrentRouterStateUrl? appRef.getCurrentRouterStateUrl(): '';
// 如果当前url和 事件url不一致
if (currentUrl !== event.url) {
// 路由跳转
appRef.navigateByUrl(event.url);
}
})
)
);
} else {
throw new Error(
`app(${app.name})'s status is ${appStatus}, can't be show or bootstrap`
);
}
});
if (apps$.length > 0) {
// 切换到应用后会有闪烁现象，所以使用 setTimeout 后启动应用
setTimeout(() => {
// 此处判断是因为如果静态资源加载完毕还未启动被取消，还是会启动之前的应用，虽然可能性比较小，但是无法排除这种可能性，所以只有当 Event 是最后一个才会启动
if (this.startRouteChangeEvent === event) {
this.ngZone.runOutsideAngular(() => {
// 将apps中的ob们合并到一起执行后
forkJoin(apps$).subscribe(() => {
// 设置加载完成状态
this.setLoadingDone();
// 然后去搞预加载,注册时传入的参数preload=tue/false
this.ensurePreloadApps(apps);
});
});
}
});
} else {
// 设置
this.ensurePreloadApps(apps);
this.setLoadingDone();
}
}),
// 使用自定义异常hook function
catchError(error => {
this.errorHandler(error);
return [];
})
);
})
)
.subscribe();
}
然后看 unload,bootstrap,destory,preload,show,hide,卸载，加载，销毁，预加载，展示，隐藏相关的这几个函数
获取卸载 app
// planet-applicaiton-loader.ts
// 传入激活的application列表
private getUnloadApps(activeApps: PlanetApplication[]) {
const unloadApps: PlanetApplication[] = [];
this.appsStatus.forEach((value, app) => {
// application状态为激活，但是激活列表中没有这个application
if (value === ApplicationStatus.active && !activeApps.find(item => item.name === app.name)) {
// 那么放入待卸载应用集合里
unloadApps.push(app);
}
});
return unloadApps;
}
卸载
// planet-applicaiton-loader.ts
// 卸载applications,第一参为application集合,第二个参数类似{url:'/about'}
private unloadApps(shouldUnloadApps: PlanetApplication[], event: PlanetRouterEvent) {
const hideApps: PlanetApplication[] = [];
const destroyApps: PlanetApplication[] = [];
// 需要卸载的app看看是隐藏模式还是销毁模式
shouldUnloadApps.forEach(app => {
// app.SwitchMode参数的两个值，在注册的时候设置的
// coexist模式
if (this.switchModeIsCoexist(app)) {
hideApps.push(app);
// 隐藏应用
this.hideApp(app);
// 设置状态
this.setAppStatus(app, ApplicationStatus.bootstrapped);
// default模式,销毁模式
} else {
destroyApps.push(app);
// 销毁之前先隐藏，否则会出现闪烁，因为 destroy 是延迟执行的
// 如果销毁不延迟执行，会出现切换到主应用的时候会有视图卡顿现象
this.hideApp(app);
//
---
// application应用状态有5个
// 资源加载状态分别是,我估计这里和预加载或者做判断有用到
>> assetsLoading = 1,
// 资源被加载状态
assetsLoaded = 2,
// 正在引导启动状态
bootstrapping = 3,
// 已经被引导启动状态
bootstrapped = 4,
// 激活状态
active = 5,
// 加载失败
loadError = 10
---
this.setAppStatus(app, ApplicationStatus.assetsLoaded);
}
});
// 如果隐藏列表或销毁列表中有值
if (hideApps.length > 0 || destroyApps.length > 0) {
// 从其他应用切换到主应用的时候会有视图卡顿现象，所以先等主应用渲染完毕后再加载其他应用
// 此处尝试使用 this.ngZone.onStable.pipe(take(1)) 应用之间的切换会出现闪烁
setTimeout(() => {
// 这里还不太理解
hideApps.forEach(app => {
const appRef = getPlanetApplicationRef(app.name);
if (appRef) {
appRef.navigateByUrl(event.url);
}
});
// 销毁app
destroyApps.forEach(app => {
this.destroyApp(app);
});
});
}
}
销毁
// planet-application-loader.ts
// 传入需要销毁的application
private destroyApp(planetApp: PlanetApplication) {
// 得到applicationRef的引用
const appRef = getPlanetApplicationRef(planetApp.name);
if (appRef) {
// 销毁
appRef.destroy();
}
// 删除 document节点
const container = getHTMLElement(planetApp.hostParent);
const appRootElement = container.querySelector((appRef && appRef.selector) || planetApp.selector);
if (appRootElement) {
container.removeChild(appRootElement);
}
}
显示和隐藏
// planet-application-loader.ts
private hideApp(planetApp: PlanetApplication) {
const appRef = getPlanetApplicationRef(planetApp.name);
// 拿到dom节点
const appRootElement = document.querySelector(appRef.selector || planetApp.selector);
if (appRootElement) {
// css隐藏
appRootElement.setAttribute('style', 'display:none;');
}
}
private showApp(planetApp: PlanetApplication) {
const appRef = getPlanetApplicationRef(planetApp.name);
// 拿到dom节点
const appRootElement = document.querySelector(appRef.selector || planetApp.selector);
// 去除隐藏样式
if (appRootElement) {
appRootElement.setAttribute('style', '');
}
}
预加载
// planet-applicatin-loader.ts
private ensurePreloadApps(activeApps?: PlanetApplication[]) {
// 第一次加载的时候 对app进行预加载
if (this.firstLoad) {
this.preloadApps(activeApps);
this.firstLoad = false;
}
}
private preloadApps(activeApps?: PlanetApplication[]) {
setTimeout(() => {
// 过滤preload为true的application
const toPreloadApps = this.planetApplicationService.getAppsToPreload(activeApps ? activeApps.map(item => item.name) : null);
// 加载
const loadApps$ = toPreloadApps.map(preloadApp => {
return this.preloadInternal(preloadApp);
});
// 对加载过程使用hooks错误处理
forkJoin(loadApps$).subscribe({
error: error => this.errorHandler(error)
});
});
}
// 第一参数application,第二参是否直接加载
private preloadInternal(app: PlanetApplication, immediate?: boolean): Observable<PlanetApplicationRef> {
// 获取app状态
const status = this.appsStatus.get(app);
// 如果没有状态或者加载错误
if (!status || status === ApplicationStatus.loadError) {
return this.startLoadAppAssets(app).pipe(
switchMap(() => {
// 如果是直接加载
if (immediate) {
// 在隐藏模式下加载
return this.bootstrapApp(app, 'hidden');
} else {
// 如果不是直接加载
// 在状态监测之外
return this.ngZone.runOutsideAngular(() => {
// 加载applicaiton
return this.bootstrapApp(app, 'hidden');
});
}
}),
map(() => {
// 返回application的引用
return getPlanetApplicationRef(app.name);
})
);
// 如果在application属于其他状态
} else if (
[ApplicationStatus.assetsLoading, ApplicationStatus.assetsLoaded, ApplicationStatus.bootstrapping].includes(
status
)
) {
return this.appStatusChange.pipe(
filter(event => {
return event.app === app && event.status === ApplicationStatus.bootstrapped;
}),
take(1),
map(() => {
// 返回引用
return getPlanetApplicationRef(app.name);
})
);
} else {
// 异常
const appRef = getPlanetApplicationRef(app.name);
if (!appRef) {
throw new Error(`${app.name}'s status is ${ApplicationStatus[status]}, planetApplicationRef is null.`);
}
return of(appRef);
}
}
bootstrap
// planet-application-loader.ts
private bootstrapApp(
app: PlanetApplication,
defaultStatus: 'hidden' | 'display' = 'display'
): Observable<PlanetApplicationRef> {
// 设置状态正在加载中
this.setAppStatus(app, ApplicationStatus.bootstrapping);
// 获取app的引用
const appRef = getPlanetApplicationRef(app.name);
// 如果注册了且boostrap函数不为空
if (appRef && appRef.bootstrap) {
// 获取 宿主dom
const container = getHTMLElement(app.hostParent);
let appRootElement: HTMLElement;
// 进行显示隐藏，加入前缀，宿主class的操作
if (container) {
appRootElement = container.querySelector(appRef.selector || app.selector);
if (!appRootElement) {
if (appRef.template) {
appRootElement = createElementByTemplate(appRef.template);
} else {
appRootElement = document.createElement(app.selector);
}
appRootElement.setAttribute('style', 'display:none;');
if (app.hostClass) {
appRootElement.classList.add(...coerceArray(app.hostClass));
}
if (app.stylePrefix) {
appRootElement.classList.add(...coerceArray(app.stylePrefix));
}
container.appendChild(appRootElement);
}
}
// 加载
let result = appRef.bootstrap(this.portalApp);
if (result['then']) {
result = from(result) as Observable<PlanetApplicationRef>;
}
// 最后返回app引用
return result.pipe(
tap(() => {
this.setAppStatus(app, ApplicationStatus.bootstrapped);
if (defaultStatus === 'display' && appRootElement) {
appRootElement.removeAttribute('style');
}
}),
map(() => {
return appRef;
})
);
} else {
throw new Error(
`[${app.name}] not found, make sure that the app has the correct name defined use defineApplication(${app.name}) and runtimeChunk and vendorChunk are set to true, details see https://github.com/worktile/ngx-planet#throw-error-cannot-read-property-call-of-undefined-at-__webpack_require__-bootstrap79`
);
}
}
app.Ref.bootstrap()
// planet-application-ref
// 加载应用获取application的引用后返回自身 PlanetApplicationRef类型
bootstrap(app: PlanetPortalApplication): Observable<this> {
if (!this.appModuleBootstrap) {
throw new Error(`app(${this.name}) is not defined`);
}
this.portalApp = app;
// 使用main.ts中传入的bootstrap来加载app,然后拿到模块引用
return from(
this.appModuleBootstrap(app).then(appModuleRef => {
// 传递引用,然后复制一些自己想要的信息从appModuleRef中
this.appModuleRef = appModuleRef;
// 传递name
this.appModuleRef.instance.appName = this.name;
this.syncPortalRouteWhenNavigationEnd();
// 返回
return this;
})
);
}
this.appModuleBootstrap 是通过 main.ts 的 defineApplication 第二参数的 bootstrap 传入的,之前看过一下
// global-planet.ts
export function defineApplication(
name: string,
options: BootstrapAppModule | BootstrapOptions
) {
if (globalPlanet.apps[name]) {
throw new Error(`${name} application has exist.`);
}
if (isFunction(options)) {
options = {
template: "",
bootstrap: options as BootstrapAppModule,
};
}
// 这里new了一个PlanetApplicationRef然后将引用传入了map中
const appRef = new PlanetApplicationRef(name, options as BootstrapOptions);
globalPlanet.apps[name] = appRef;
}
this.appModuleBootstrap
// planet-application-ref.ts
export class PlanetApplicationRef {
...
// 这里是global-planet new的对象时候传入的
private appModuleBootstrap: (app: PlanetPortalApplication) => Promise<NgModuleRef<any>>;
...
constructor(name: string, options: BootstrapOptions) {
this.name = name;
if (options) {
this.template = options.template;
this.innerSelector = this.template ? getTagNameByTemplate(this.template) : null;
// 具体传入
this.appModuleBootstrap = options.bootstrap;
}
}
至此，bootstrap 结束
assetsLoader
之前在核心的 setupRouteChange 走第三步之前，中间有一个加载 assets 的阶段，毕竟子应用的 main.ts 应该是不能主动注册过来的,需要加载静态文件来获取，我是这么猜测的
// planet-application-loader.ts
switchMap((shouldLoadApps) => {
let hasAppsNeedLoadingAssets = false;
const loadApps$ = shouldLoadApps.map((app) => {
const appStatus = this.appsStatus.get(app);
if (
!appStatus ||
appStatus === ApplicationStatus.assetsLoading ||
appStatus === ApplicationStatus.loadError
) {
hasAppsNeedLoadingAssets = true;
return this.ngZone.runOutsideAngular(() => {
// 核心调用,开始加载application的assets
return this.startLoadAppAssets(app);
});
} else {
return of(app);
}
});
if (hasAppsNeedLoadingAssets) {
this.loadingDone = false;
}
return loadApps$.length > 0
? forkJoin(loadApps$)
: of([] as PlanetApplication[]);
});
private startLoadAppAssets(app: PlanetApplication) {
if (this.inProgressAppAssetsLoads.get(app.name)) {
return this.inProgressAppAssetsLoads.get(app.name);
} else {
// assetsLoader.loadAppAssets 核心函数,调用完毕后看是否放入map中
const loadApp$ = this.assetsLoader.loadAppAssets(app).pipe(
tap(() => {
this.inProgressAppAssetsLoads.delete(app.name);
// 设置加载完毕状态
this.setAppStatus(app, ApplicationStatus.assetsLoaded);
}),
map(() => {
return app;
}),
catchError(error => {
this.inProgressAppAssetsLoads.delete(app.name);
// 加载失败状态
this.setAppStatus(app, ApplicationStatus.loadError);
throw error;
}),
share()
);
// 放入map中
this.inProgressAppAssetsLoads.set(app.name, loadApp$);
// 设置状态为assetsLoading状态,这里要知道返回的ob所以写代码的时候Loaded在Loading上面，真正订阅subscribe的时候，顺序就对了
this.setAppStatus(app, ApplicationStatus.assetsLoading);
return loadApp$;
}
}
调用了构造器注入的 assetsLoader 看一眼 loader 里咋写的吧
关于 mainfest.json 看一看 https://jonny-huang.github.io/angular/training/19_pwa/ 有关于 PWA 方面的内容
{
"main.js": "main-es2015.js",
"main.js.map": "main-es2015.js.map",
"polyfills-es5.js": "polyfills-es5-es2015.js",
"polyfills-es5.js.map": "polyfills-es5-es2015.js.map",
"polyfills.js": "polyfills-es2015.js",
"polyfills.js.map": "polyfills-es2015.js.map",
"styles.css": "styles.css",
"styles.css.map": "styles.css.map"
}
// load结果的接口类型
export interface AssetsLoadResult {
src: string;
hashCode: number;
loaded: boolean;
status: string;
}
// context注入,全剧唯一
@Injectable({
providedIn: "root",
})
export class AssetsLoader {
// 加载过的sources
private loadedSources: number[] = [];
// 获取http客户端
constructor(private http: HttpClient) {}
// 加载script
loadScript(src: string): Observable<AssetsLoadResult> {
// hashCode
const id = hashCode(src);
// 通过hashCode判断是否加载过了这个js
if (this.loadedSources.includes(id)) {
return of({
src: src,
hashCode: id,
loaded: true,
status: "Loaded",
});
}
// 然后构建<script type="text/javascript" src=""> 插入dom
return new Observable((observer: Observer<AssetsLoadResult>) => {
const script: HTMLScriptElement = document.createElement("script");
script.type = "text/javascript";
script.src = src;
script.async = true;
if (script["readyState"]) {
// IE
script["onreadystatechange"] = () => {
if (
script["readyState"] === "loaded" ||
script["readyState"] === "complete"
) {
script["onreadystatechange"] = null;
observer.next({
src: src,
hashCode: id,
loaded: true,
status: "Loaded",
});
observer.complete();
this.loadedSources.push(id);
}
};
} else {
// Others
script.onload = () => {
observer.next({
src: src,
hashCode: id,
loaded: true,
status: "Loaded",
});
observer.complete();
this.loadedSources.push(id);
};
}
script.onerror = (error) => {
observer.error({
src: src,
hashCode: id,
loaded: false,
status: "Error",
error: error,
});
observer.complete();
};
document.body.appendChild(script);
});
}
// 加载style 和script一个道理
loadStyle(src: string): Observable<AssetsLoadResult> {
const id = hashCode(src);
if (this.loadedSources.includes(id)) {
return of({
src: src,
hashCode: id,
loaded: true,
status: "Loaded",
});
}
return new Observable((observer: Observer<AssetsLoadResult>) => {
const head = document.getElementsByTagName("head")[0];
const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = src;
link.media = "all";
link.onload = () => {
observer.next({
src: src,
hashCode: id,
loaded: true,
status: "Loaded",
});
observer.complete();
this.loadedSources.push(id);
};
link.onerror = (error) => {
observer.error({
src: src,
hashCode: id,
loaded: true,
status: "Loaded",
error: error,
});
observer.complete();
};
head.appendChild(link);
});
}
// 加载script集合
loadScripts(
sources: string[],
serial = false
): Observable<AssetsLoadResult[]> {
if (isEmpty(sources)) {
return of(null);
}
const observables = sources.map((src) => {
return this.loadScript(src);
});
if (serial) {
const a = concat(...observables).pipe(
map((item) => {
return of([item]);
}),
concatAll()
);
return a;
} else {
return forkJoin(observables).pipe();
}
}
// 加载style集合
loadStyles(sources: string[]): Observable<AssetsLoadResult[]> {
if (isEmpty(sources)) {
return of(null);
}
return forkJoin(
sources.map((src) => {
return this.loadStyle(src);
})
);
}
// 双重加载
loadScriptsAndStyles(
scripts: string[] = [],
styles: string[] = [],
serial = false
) {
return forkJoin([
this.loadScripts(scripts, serial),
this.loadStyles(styles),
]);
}
// 加载static资源
loadAppAssets(app: PlanetApplication) {
if (app.manifest) {
// 通过httpClient找到json，通过json找到script路径，最后插入到dom中
return this.loadManifest(
`${app.manifest}?t=${new Date().getTime()}`
).pipe(
switchMap((manifestResult) => {
// 获取了css和js的全路径 app1/{json中的js和css}
const { scripts, styles } = getScriptsAndStylesFullPaths(
app,
manifestResult
);
// 然后加载
return this.loadScriptsAndStyles(scripts, styles, app.loadSerial);
})
);
} else {
const { scripts, styles } = getScriptsAndStylesFullPaths(app);
return this.loadScriptsAndStyles(scripts, styles, app.loadSerial);
}
}
// 加载mainfest
loadManifest(url: string): Observable<{ [key: string]: string }> {
return this.http.get(url).pipe(
map((response: any) => {
return response;
})
);
}
}
到此，javascript 和 stylesheet 加载完毕
组件注册
直接看文件然后找个例子看看
// planet-component-ref.ts
// 引用
export class PlanetComponentRef<TComp = any> {
// 包装元素
wrapperElement: HTMLElement;
// 组件类型
componentInstance: TComp;
// 组件引用
componentRef: ComponentRef<TComp>;
// 处理函数
dispose: () => void;
}
// planet-component-config.ts
// 组件配置
export class PlantComponentConfig<TData = any> {
// 目标容器
container: HTMLElement | ElementRef<HTMLElement | any>;
// 包装class
wrapperClass?: string;
// 初始化状态
initialState?: TData | null = null;
}
const componentWrapperClass = 'planet-component-wrapper';
export interface PlanetComponent<T = any> {
name: string;
component: ComponentType<T>;
}
@Injectable({
providedIn: 'root'
})
export class PlanetComponentLoader {
private domPortalOutletCache = new WeakMap<any, DomPortalOutlet>();
private get applicationLoader() {
return getApplicationLoader();
}
private get applicationService() {
return getApplicationService();
}
constructor(
// 当前页面应用的引用
private applicationRef: ApplicationRef,
// 模块的引用
private ngModuleRef: NgModuleRef<any>,
// 变更检测
private ngZone: NgZone,
// document
@Inject(DOCUMENT) private document: any
) {}
// 获取Planet存储的Application的引用，通过name,返回一个ob<引用>对象
private getPlantAppRef(name: string): Observable<PlanetApplicationRef> {
if (globalPlanet.apps[name] && globalPlanet.apps[name].appModuleRef) {
return of(globalPlanet.apps[name]);
} else {
const app = this.applicationService.getAppByName(name);
return this.applicationLoader.preload(app, true).pipe(
map(() => {
return globalPlanet.apps[name];
})
);
}
}
// 传入模块和组件的引用,创建injector
private createInjector<TData>(
appModuleRef: NgModuleRef<any>,
componentRef: PlanetComponentRef<TData>
): PortalInjector {
const injectionTokens = new WeakMap<any, any>([[PlanetComponentRef, componentRef]]);
const defaultInjector = appModuleRef.injector;
return new PortalInjector(defaultInjector, injectionTokens);
}
// 获取container内component的HTML元素
private getContainerElement(config: PlantComponentConfig): HTMLElement {
if (!config.container) {
throw new Error(`config 'container' cannot be null`);
} else {
if ((config.container as ElementRef).nativeElement) {
return (config.container as ElementRef).nativeElement;
} else {
return config.container as HTMLElement;
}
}
}
// 创建包装元素
private createWrapperElement(config: PlantComponentConfig) {
const container = this.getContainerElement(config);
// 创建div
const element = this.document.createElement('div');
// 拿到应用PlantApplication
const subApp = this.applicationService.getAppByName(this.ngModuleRef.instance.appName);
// 加入 planet-component-wrapper 在classList中
element.classList.add(componentWrapperClass);
// 加入 attribute planet-inline
element.setAttribute('planet-inline', '');
// 如果设置中配置了wrapperClass
if (config.wrapperClass) {
// 加入
element.classList.add(config.wrapperClass);
}
// 如果注册的时候加入了stylePrefix前缀
if (subApp && subApp.stylePrefix) {
// 加入到classList里
element.classList.add(subApp.stylePrefix);
}
// container插入element
container.appendChild(element);
return element;
}
// 附加组件在页面上
private attachComponent<TData>(
plantComponent: PlanetComponent,
appModuleRef: NgModuleRef<any>,
config: PlantComponentConfig
): PlanetComponentRef<TData> {
// 创建一个planetComponent引用
// 注意里面有实例 componentInstance: TComp;
// 有引用 componentRef: ComponentRef<TComp>;
const plantComponentRef = new PlanetComponentRef();
// 组件工厂解析器, 组件工厂解析器可以产生一个组件工厂(ComponentFactory)
const componentFactoryResolver = appModuleRef.componentFactoryResolver;
const appRef = this.applicationRef;
// 创建一个自定义注入器,
// 向入口组件提供自定义注入token时要使用的自定义注入器
const injector = this.createInjector<TData>(appModuleRef, plantComponentRef);
// 创建包装后的element
const wrapper = this.createWrapperElement(config);
// 如果有了相同的dom出口
let portalOutlet = this.domPortalOutletCache.get(wrapper);
if (portalOutlet) {
// 那么卸载
portalOutlet.detach();
} else {
// DomPortalOutlet 我理解成，容器？出口？站位dom元素。不知道对不对
// 传递了element,组件工厂,模块引用,注入器
portalOutlet = new DomPortalOutlet(wrapper, componentFactoryResolver, appRef, injector);
// 存储此次添加的 dom出口
this.domPortalOutletCache.set(wrapper, portalOutlet);
}
// 创建一个 填入出口 的 portalComponent 也就是去填占位符的ComponentPortal<自定义组件实例>
const componentPortal = new ComponentPortal(plantComponent.component, null);
// ComponentPortal<自定义组件实例> 填入出口中
const componentRef = portalOutlet.attachComponentPortal<TData>(componentPortal);
// 如果有初始化state
if (config.initialState) {
// 那么混入component的实例中去
Object.assign(componentRef.instance, config.initialState);
}
// 传递一些引用
plantComponentRef.componentInstance = componentRef.instance;
plantComponentRef.componentRef = componentRef;
plantComponentRef.wrapperElement = wrapper;
// 注册卸载函数
plantComponentRef.dispose = () => {
// 删除缓存的出口element
this.domPortalOutletCache.delete(wrapper);
// 从dom中清除出口/占位符？
portalOutlet.dispose();
};
// 返回 填上出口的 component引用 PlanetComponentRef 类型
return plantComponentRef;
}
private registerComponentFactory(componentOrComponents: PlanetComponent | PlanetComponent[]) {
// 获取app名称
const app = this.ngModuleRef.instance.appName;
// 拿到当前应用
this.getPlantAppRef(app).subscribe(appRef => {
--- registerComponentFactory
// 传入匿名函数,函数两个参数:组件名称,config.返回一个PlanetComponentRef
>export type PlantComponentFactory = <TData, TComp>(
componentName: string,
config: PlantComponentConfig<TData>
) => PlanetComponentRef<TComp>;
---
// 将 componentOrComponents转成数组
const components = coerceArray(componentOrComponents);
// 找到 与componentName名称一样的组件
const component = components.find(item => item.name === componentName);
// 如果存在
if (component) {
// 在变更检测范围内
return this.ngZone.run(() => {
// 附加组件，然后返回PlanetComponentRef匿名函数结束
// 此时，planet-application-ref的factory为注册组件的factory
// 然后进行组件附加,传入component,模块引用，组件设置
const componentRef = this.attachComponent<any>(component, appRef.appModuleRef, config);
return componentRef;
});
} else {
throw Error(`unregistered component ${componentName} in app ${app}`);
}
});
});
}
// 注册，
register(components: PlanetComponent | PlanetComponent[]) {
setTimeout(() => {
this.registerComponentFactory(components);
});
}
// 加载,传入app名称,组件名称,配置项
load<TComp = unknown, TData = unknown>(
app: string,
componentName: string,
config: PlantComponentConfig<TData>
): Observable<PlanetComponentRef<TComp>> {
// 获取应用的引用
const result = this.getPlantAppRef(app).pipe(
//将源的发射延迟可观察到的时间间隔 由另一个 Observable 的发射确定。
delayWhen(appRef => {
if (appRef.getComponentFactory()) {
return of();
} else {
// Because register use 'setTimeout',so timer 20
return timer(20);
}
}),
map(appRef => {
// 拿到引用中的组件工厂
const componentFactory = appRef.getComponentFactory();
if (componentFactory) {
// 这里传入了componentName和config,从而调用了入口出口填补组件的函数`attachComponent`，比较巧妙
return componentFactory<TData, TComp>(componentName, config);
} else {
throw new Error(`${app}'s component(${componentName}) is not registered`);
}
}),
finalize(() => {
// 变更检测
this.applicationRef.tick();
}),
shareReplay()
);
result.subscribe();
return result;
}
}
事件注册
简单过一下事件注册
// global-event-dispatcher.ts
export interface GlobalDispatcherEvent {
name: string;
payload: any;
}
const CUSTOM_EVENT_NAME = "PLANET_GLOBAL_EVENT_DISPATCHER";
@Injectable({
providedIn: "root",
})
export class GlobalEventDispatcher {
// ob
private subject$: Subject<GlobalDispatcherEvent> = new Subject();
// 是否加入了全局事件监听
private hasAddGlobalEventListener = false;
// 订阅总数
private subscriptionCount = 0;
private globalEventListener = (event: CustomEvent) => {
this.subject$.next(event.detail);
};
// 加入全局事件监听
private addGlobalEventListener() {
this.hasAddGlobalEventListener = true;
window.addEventListener(CUSTOM_EVENT_NAME, this.globalEventListener);
}
// 删除全局事件监听
private removeGlobalEventListener() {
this.hasAddGlobalEventListener = false;
window.removeEventListener(CUSTOM_EVENT_NAME, this.globalEventListener);
}
constructor(private ngZone: NgZone) {}
// 发射数据,你可以通过 name进行数据的区分,发射的应该是主动方
dispatch<TPayload>(name: string, payload?: TPayload) {
window.dispatchEvent(
// 通过CUSTOM_EVENT_NAME 找到了 globalEventListener函数
// 然后将detail传入函数，所以现在subject中接收到值了
new CustomEvent(CUSTOM_EVENT_NAME, {
detail: {
name: name,
payload: payload,
},
})
);
}
// 注册事件 返回ob对象, 注册的应该是被动方
register<T>(eventName: string): Observable<T> {
return new Observable((observer) => {
// 如果没有全局事件监听，那么先添加
if (!this.hasAddGlobalEventListener) {
this.addGlobalEventListener();
}
this.subscriptionCount++;
// subscription 用来去掉订阅用的
const subscription = this.subject$
.pipe(
filter((event) => {
// 过滤出eventName一致的payload
return event.name === eventName;
}),
map((event) => {
// 返回payload
return event.payload;
})
)
.subscribe((payload) => {
// 发射payload让订阅的地方得到值
this.ngZone.run(() => {
observer.next(payload);
});
});
return () => {
this.subscriptionCount--;
subscription.unsubscribe();
if (!this.subscriptionCount) {
this.removeGlobalEventListener();
}
};
});
}
getSubscriptionCount() {
return this.subscriptionCount;
}
}
看一个 demo
// 被动方,等待name=openADetail的event发射值
this.globalEventDispatcher.register('openADetail').subscribe(event => {
this.thyDialog.open(ADetailComponent);
});
// name=openADetail 发射空值,此时上一个函数的 this.thyDialog.open(ADetailComponent);将被调用
this.globalEventDispatcher.dispatch('openADetail');
END
结束,鄙人技术有限,有些地方不太准确(太不准确),不过按照这个思路将项目走一遍可以对 ngx-planet 有一个比较清晰的认识，有问题可邮件联系，或在 gitalk 中直接回复
著名来源随意转载爬取 https://blog.eiyouhe.com/articles/2021/01/22/1611298349966.html
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于