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

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

辅助类的实际实现看起来像这样：

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>

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

1 个答案: