Wie kann ich der aktuellen Klasse mithilfe von AngularJs und TypeScript eine Abhängigkeit hinzufügen?

Question

Angenommen, ich habe eine Komponentenklasse wie folgt;

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

Die Helper-Klasse lebt in einer anderen Datei wie dieser.

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

    } 
} 

Es sieht aus wie ich nicht Dependency Injection für meine Hilfsklasse verwenden kann, egal was, da es einen Verweis auf die Komponente speichert. Das einzige, was ich sehe, um das zu machen, ist, es so zu belassen, wie es ist, oder indem ich die Komponenteninstanz nach der Injektion wie folgt einstelle, was ich auch nicht mag.

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

Die Helper-Klasse lebt in einer anderen Datei wie dieser.

Beide fühlen sich falsch an, aber ich sehe keine vernünftige Alternative.

Answer 1

Ich denke, dass der beste Weg in diesen Szenarien ist, die abhängige Klasseninstanz zu eliminieren.

Die eigentliche Implementierung der Hilfsklasse sieht eigentlich diese wie:

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

Die Unterklasse sieht wie folgt aus:

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

Und die Basiskomponente Klasse ruft die Methode nach Bedarf:

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

So scheint es jetzt praktischer zu nennen Aktion in der Instanz w übergeben Dies wird die Konstruktorabhängigkeit mit der neuen Implementierung wie folgt eliminieren.

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

Die Unterklasse sieht nun folgendermaßen aus:

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

Und die Komponente Basisklasse ruft die Methode nach Bedarf.

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

jetzt My-Komponente arbeitet mit Dependency Injection ohne unnötige Instanz Abhängigkeit fein wie folgt:

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

Und Template-Code das ist wie:

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