如何构建可获取外部数据的Nx UI库？

针对你遇到的问题，在Nx标准模块边界限制下，有几个更贴合Nx心智模型的解决方案：

1. 通用共享数据服务库（推荐方案） #

不用新增自定义库类型，而是创建一个无业务耦合的共享数据服务库（比如命名为data-access-shared），专门存放跨UI组件复用的通用缓存数据逻辑——比如州数据的加载、缓存逻辑。

• 让你的ui-address-input库依赖这个共享数据服务库，组件内部通过注入服务直接获取缓存后的州数据，无需外部通过@Input传入。
• 核心原则：这个共享数据服务库只做通用数据的缓存和基础获取，不包含任何业务逻辑，避免和特定feature绑定，这样所有UI库都能安全依赖它，不会打破Nx的模块边界规则。
• 代码示例：

  // data-access-shared/src/lib/states.service.ts
  @Injectable({ providedIn: 'root' })
  export class StatesService {
    private statesCache$: Observable<State[]>;
  
    constructor(private http: HttpClient) {}
  
    getStates(): Observable<State[]> {
      if (!this.statesCache$) {
        this.statesCache$ = this.http.get<State[]>('/api/states').pipe(
          shareReplay(1) // 缓存请求结果，全局只触发一次请求
        );
      }
      return this.statesCache$;
    }
  }
  
  // ui-address-input/src/lib/address-state-selector.component.ts
  @Component({
    selector: 'ui-address-state-selector',
    template: `
      <select>
        <option *ngFor="let state of states$ | async" [value]="state.code">
          {{ state.name }}
        </option>
      </select>
    `
  })
  export class AddressStateSelectorComponent {
    states$ = this.statesService.getStates();
  
    constructor(private statesService: StatesService) {}
  }
  

2. 组件+内部服务的封装UI库 #

如果州数据逻辑仅和地址选择器强绑定，不会被其他UI组件复用，可以把UI组件和配套的数据服务打包到同一个UI库中（比如ui-address）：

• 库内区分components和internal-services目录，数据服务仅作为库内部依赖，不对外暴露。
• 这种方式下，该库依然属于Nx定义的UI库范畴，对外只暴露组件，同时内部完成数据获取和缓存，既保持了组件的可复用性，又避免了外部重复传参的繁琐。

3. 自定义Nx依赖约束规则 #

如果需要批量创建这类带数据的UI组件，可以通过Nx的依赖约束机制，允许UI库依赖特定的共享数据服务库，同时禁止依赖业务相关的data-access库：

• 在nx.json中配置标签和依赖规则，确保UI库只能依赖通用共享类的库，不会引入业务耦合。
• 配置示例：

  "projects": {
    "ui-address-input": {
      "tags": ["type:ui", "scope:shared"]
    },
    "data-access-shared": {
      "tags": ["type:data-access", "scope:shared"]
    }
  },
  "dependencyConstraints": [
    {
      "sourceTag": "type:ui",
      "onlyDependOnLibsWithTags": ["type:ui", "type:data-access", "scope:shared"]
    }
  ]
  

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