如何使用AngularJs和TypeScript向当前类添加依赖项？

Question

假设我有一个如下的组件类；

@Component({
  selector: "my",
  templateUrl: "/app/my.html"
})
export class MyComponent extends MyBase {
  helper: Helper;
  constructor() 
  { 
     helper = new Helper(this);
  } 
}

Helper类位于另一个这样的文件中。

export class Helper {
    constructor(protected component: MyBase)
    {

    }
}

看起来无论如何我都不能对我的助手类使用依赖注入，因为它存储了对组件的引用。 我看到要完成这项工作的唯一方法是按原样保留它，或者按如下所示设置注入后的组件实例，我都不喜欢。

export class MyComponent extends MyBase {
  constructor(public helper:Helper) 
  { 
    helper.component = this;
  } 
}

Helper类位于另一个这样的文件中。

@Injectable()
export class Helper {
    public component : MyBase;
}

这两种感觉都错了，但是我没有找到合理的选择。

Answer 1

我认为在这种情况下最好的方法就是消除依赖类实例。

helper类的实际实现实际上是这样的：

export abstract class MvcAction<TComponent>
{
  constructor(protected component:TComponent)
  public abstract complete(): void;
}

子类如下所示：

export class CustomAction extends MvcAction<TComponent>
{
  constructor(protected component:TComponent)
  {
      super(component);
  }
  public abstract complete(): void;
}

基础组件类根据需要调用该方法：

public perform(action: MvcAction<T>) {
    action.complete();
}

因此，现在在实例中调用动作传递似乎更为实用，该动作将通过新的实现方式消除构造者的依赖性，如下所示。

export abstract class MvcAction<ComponentBase>
{
  public abstract complete(component: ComponentBase): void;
}

现在，子类如下所示：

export class CustomAction extends MvcAction<TComponent>
{
  public complete(component: TComponent): void
  {
      // Do something with the component.
  }
}

组件基类根据需要调用该方法。

public perform(action: MvcAction<ComponentBase>) {
    action.complete(this);
}

我的组件现在可以通过依赖项注入正常运行，而无需不需要的实例依赖项，如下所示：

export class SomeComponent extends ComponentBase<any> {
  constructor(protected customAction: CustomAction ) {
  }
}

模板代码是这样的：

<a (click)="perform(customAction)">Do Custom Action</a>