角绑定指令到宿主父代

Question

Is it possible to limit directive to host parent? I want to bind it only to my-component .

For example:

@Directive({
    selector: '[myDirective]'
})
export class MyDirective
{
    constructor() {  }
}

I want directive "to work" only when direct or no-direct child of my-component:

<my-component>
  <ng-template myDirective></ng-template>
</my-component>

but not in this case:

<any-other-component-then-my-component>      //like <div>, <tabstrip>, <panel> ...
  <ng-template myDirective></ng-template>
</any-other-component-then-my-component>

I know I can limit to host with prefixing selector: 'ng-template[myDirective]' but I need parent, so I can avoid large selector like

@Directive({
    selector: '[myComponentMyDirective]'
})

Answer 1

What you could do, instead of creating a selector for your directive, is to check if the parent is the component you want.

this would be something like this :

ngOnInit() {
  const el = this.el.nativeElement as HTMLElement;
  const parent = el.parentElement;
  const componentName = parent.nodeName;
  if (!componentName === 'my-component') { return; } // Stop making your directive
}