如何使用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 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(); 
} 

因此，現在看起來更實際的是調用行爲在實例w中傳遞這將消除與新的實現，如下所示的構造依賴。

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>