Angular场景下：将指令转为组件后，如何传递path值服务？

哈哈，这个坑我刚转组件的时候踩过！其实AngularJS的组件配置里，templateUrl属性同样支持依赖注入的函数，和你之前写指令的方式几乎一样，只是写法稍微调整下就行：

.component('myCustomer', {
  // 直接把templateUrl设为带注入的函数，逻辑和指令里完全一致
  templateUrl: ['path', function(path) {
    return path + '/customer.html';
  }],
  // 别忘了组件必备的其他配置，比如控制器、绑定属性这些
  controller: function() {
    // 组件控制器逻辑
  },
  bindings: {
    // 比如绑定传入的客户ID
    customerId: '<'
  }
});

AngularJS会自动识别这个带依赖标注的函数，帮你注入path服务，执行后返回最终的模板路径，完美衔接你之前的逻辑～

如果你是指Angular（2+，也就是现在的正式版Angular）的组件，那因为装饰器执行时机的限制，没法直接在@Component里注入服务，这里给你两个常用的解决办法：

• 方式一：用inject()函数（Angular 14+支持）
  新版本Angular提供了inject()函数，可以在装饰器里直接获取服务实例，写法很简洁：

  import { Component, inject } from '@angular/core';
  import { PathService } from './path.service';
  
  @Component({
    selector: 'app-my-customer',
    templateUrl: `${inject(PathService).getPath()}/customer.html`
  })
  export class MyCustomerComponent {}
  

• 方式二：提前通过APP_INITIALIZER加载全局路径
  如果你的Angular版本较低，或者需要更灵活的全局配置，可以在应用启动时把路径存入全局变量，组件里直接引用：
  首先在AppModule里配置初始化逻辑：

  import { APP_INITIALIZER, NgModule } from '@angular/core';
  import { PathService } from './path.service';
  
  // 初始化函数：把路径存入全局
  function loadAppPath(pathService: PathService) {
    return () => {
      window['appBasePath'] = pathService.getPath();
    };
  }
  
  @NgModule({
    // ...其他模块配置
    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: loadAppPath,
        deps: [PathService],
        multi: true
      }
    ]
  })
  export class AppModule {}
  

  然后组件里直接用全局变量：

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-my-customer',
    templateUrl: `${window['appBasePath']}/customer.html`
  })
  export class MyCustomerComponent {}
  

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