Question

假设我们有这个组件：

@Component({

  template: `
   <div *ngFor="let v of values;" #aService="getServiceInstance()">
      <child-component1 [s]="aService"></child-component1>
      <child-component2 [s]="aService"></child-component2>
   </div>
 `

})
export class MyComponent {

  values = [1,2,3,4,5];

  getServiceInstance(){

      // ??? how to implement this ???

  }

}

我的问题是 - 我如何实现getServiceInstance()方法，以便将新的服务实例注入子组件？有办法以某种方式这样做吗？也许使用装饰师？

我猜这样的事情是可能的：

 @Inject(MyService)
 getServiceInstance(ms: MyService){

    ms.13 = 'dangerous';
    return ms;

 }

但这只是猜测。

Answer 1

然后，您可以在包含服务和数字的values数组中创建一个复杂对象（而不仅仅是一个数字）。在创建/变异数组（无论如何）时，使用工厂服务在数组中为每个项目创建服务实例。然后，如果要将服务传递给子组件，则可以在模板的Eslint循环中引用此服务。

您需要提供*ngFor和Service的实现/定义，但这应该说明这一点。

ServiceFactory

Answer 2

为什么不将该服务作为单独的服务创建@Injectable装饰器，然后在child-component - s中注入该服务。

@Injectable()
export class YourService { ... }

...

@Component({...})
export class ChildCmp {
   constructor(private yourService: YourService)
}

您可以执行类似

的操作

getServiceInstance() {

   return () => {
      // Your logic here
   };

}

但我不认为这是一个很好的解决方案，因为我不明白你为什么要这样做。

通过HTML调用实例化Angular服务

2 个答案: