Как динамически добавить директиву?

как динамически добавить (inject) директива в хост?

у меня есть директива myTooltip, и я хотел бы добавить директиву mdTooltip к ее хосту. Я пробовал setAttribute() of ElementRef.nativeElement, но он не создает директиву mdTooltip.

mytooltip.директива.ТС:

@Directive({
  selector: '[my-tooltip]',
  host: {
    '(mouseenter)': 'show()',
    '(mouseleave)': 'hide()',
  }
})
export class myTooltip {
  @Input('my-tooltip') message;

  constructor() { }

  show() {
    /* TODO: How to add md-tooltip directive to elementref (host)? */
  }

  hide() {
    /* TODO: remove md-tooltip directive from elementref (host) */
  }
}

под хостом я подразумеваю элемент, который имеет директиву myTooltip:

<span my-tooltip="tooltip hint">Click here</span>

результат не изменится выше html, но на mouseenter это будет иметь директиву MD-tooltip в span.

кстати, причина, по которой я использую обертку, а не непосредственно MD-tooltip, заключается в том, что я хочу позже изменить показ задержки, скрытие задержки и настроить поведение подсказки материала в других средствах.

редактировать по-видимому, динамическое добавление директив в настоящее время не поддерживается :( я думаю, что этот вопрос все еще должен быть здесь, если он обновляет команду

14
angular angular2-directives

1 ответов

это функция, которую мы просим в angular...прочтите это: https://github.com/angular/angular/issues/8785

быстрый и грязный способ сделать это-использовать:

у меня есть директива с именем myHilite (чтобы выделить текст), у меня также есть компонент с именем MainComponent.ts. В MainComponent.ts Я добавил эту строку кода...

export class MainComponent {
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite();
}

если ваша директива требует параметров...

export class MainComponent {
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite(this.elementRef);
}

вашей директиве может потребоваться выполнить код в одном из его крючки жизненного цикла вручную вызывают метод Lifecycle hook директивы в методе lifecycle hook родительского компонента следующим образом...

export class MainComponent {
    //...code...

    ngOnInit(){
        this.myHiliteDirective.ngOnInit();
    }
}
14