Angular directive. why would a variable initialized from a generic act like a singleton?

The idea is to have a general purpose directive where the consuming components pass in an interface to the directive which creates variable data from the interface. Works great with one component accessing the data as this.data. But if you have multiple components data acts like a singleton that all the components share from the last component created.

Some other observations. Each component seems to maintain it's data until an outside event happens. For example I have a service that I subscribe to that acts as a messenger between it's consumers. The components can call out and send data from it's data and it is unique that that component. As soon as a message is received all the components share the data of the receiving component. Also if you don't use that communication service and set data directly the first component modified shares it data with all the other components.

Odd too JSON.stringify(this.data) produces an empty string.

Is the way I have data in the directive defected? It is the only method I got to work. Trying to initialize in the constructor I always got token errors I didn't figure out.


@Directive({
selector: 'app-root-directive'
})
export class RootDirective<T> {
constructor(){}

data:any= this.activator<T>;

activator<T>(type: { new(): T ;} ): T {
return new type();c
}
}

// consuming component

export class MultiselectComponent extends RootDirective<ISelectData> {

// interface

export interface ISelectData{
keyId:string;
value:any;
controlName:string;
controlId:string;
instanceId:string;
anchorCaption: string;
placeholder: string;
sort: boolean;
single: boolean;
filterValue: string;
}

Continue reading...