Let us assume a hypothetical situation. You and I have a component (named AComponent) identified by the selector a-component, and a directive identified by the selector [is-modified].
In another component's definition file, we use the following template that combines our component and our directive, which modifies the component:
<a-component is-modified></a-component>
The documentation for a attribute Directive indicates that the constructor gives the directive access to the ElementRef, but there is no link from ElementRef to the Component parent.
export class IsModifiedDirective
{
constructor( elementReference : ElementRef )
{
console.log( elementReference );
//no connection appears to exist between elementReference and the component
//also: ElementRef has security risks, so it should be avoided.
debugger;
}
}
I tried using injection to inject the necessary component and changed the ElementRef to a ComponentRef<AComponent>; this gave the error that no provider is specified for ComponentRef. I then tried to inject the component AComponent, but that generated errors as well.
The documentation clearly indicates that "Attribute directives—change the appearance or behavior of an element, component, or another directive.", but I do not see how the Directive obtains access to the component that it modifies.
Can anyone provide assistance?