同一页面多个Angular元素懒加载并共享同一服务可行吗？

咱们一步步来解答你的问题，结合你提到的源码思路，帮你理清实现方式：

一、当前Angular版本的功能支持 #

Angular从9.x版本开始就正式支持Angular Elements的懒加载能力，后续的10+到最新稳定版都持续完善了这个功能，所以当前主流Angular版本完全满足你的需求。

二、基于Selector属性实现Angular元素懒加载 #

你提到通过selector属性（@Input）创建自定义元素，结合懒加载的核心思路是动态导入组件/模块，而非提前打包进主 bundle。具体实现步骤如下：

1. 准备懒加载组件与模块
   先创建独立的懒加载模块，把你的自定义元素组件声明在其中：

   // lazy-element.module.ts
   import { NgModule } from '@angular/core';
   import { LazyElementComponent } from './lazy-element.component';
   
   @NgModule({
     declarations: [LazyElementComponent],
     exports: [LazyElementComponent]
   })
   export class LazyElementModule {}
   

2. 动态加载并定义自定义元素
   写一个异步函数，在需要的时候（比如元素进入视口、用户交互触发）动态导入模块和组件，再创建自定义元素：

   import { createCustomElement, createNgModuleRef } from '@angular/elements';
   import { injector } from '@angular/core';
   
   async function loadAndDefineLazyElement() {
     // 动态导入懒加载模块与组件
     const { LazyElementModule } = await import('./lazy-element/lazy-element.module');
     const { LazyElementComponent } = await import('./lazy-element/lazy-element.component');
   
     // 创建模块引用，获取注入器
     const moduleRef = createNgModuleRef(LazyElementModule, injector);
     // 创建自定义元素，传入模块注入器
     const lazyElement = createCustomElement(LazyElementComponent, { 
       injector: moduleRef.injector 
     });
   
     // 定义自定义元素（对应你的selector属性）
     if (!customElements.get('lazy-element')) {
       customElements.define('lazy-element', lazyElement);
     }
   }
   

3. 按需触发懒加载
   可以结合Intersection Observer实现元素进入视口时自动加载，优化性能：

   // 监听页面中所有lazy-element元素
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         loadAndDefineLazyElement();
         observer.unobserve(entry.target);
       }
     });
   });
   
   document.querySelectorAll('lazy-element').forEach(el => observer.observe(el));
   

三、实现多个Angular元素共享同一服务 #

要让同一页面的多个自定义元素共享服务实例，核心是使用共享的注入器，确保服务是单例模式：

1. 定义单例服务
   用providedIn: 'root'标记服务，让它默认注册在根注入器中：

   // shared-data.service.ts
   import { Injectable } from '@angular/core';
   
   @Injectable({ providedIn: 'root' })
   export class SharedDataService {
     public sharedCounter = 0;
   
     incrementCounter() {
       this.sharedCounter++;
     }
   }
   

2. 使用共享注入器创建自定义元素
   不管是懒加载还是常规自定义元素，都使用根注入器来创建，这样所有元素都会共享根注入器中的服务实例：

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { createCustomElement } from '@angular/elements';
   import { Component1 } from './component1.component';
   import { Component2 } from './component2.component';
   
   // 获取根注入器
   const rootInjector = platformBrowserDynamic().injector;
   
   // 创建第一个自定义元素
   const Element1 = createCustomElement(Component1, { injector: rootInjector });
   customElements.define('custom-element-1', Element1);
   
   // 创建第二个自定义元素，使用同一个根注入器
   const Element2 = createCustomElement(Component2, { injector: rootInjector });
   customElements.define('custom-element-2', Element2);
   

这样，<custom-element-1>和<custom-element-2>就会共享同一个SharedDataService实例，修改服务中的数据会在所有元素中同步。

内容的提问来源于stack exchange，提问作者user8987378