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

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

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

mytooltip.directive.ts:

@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 в диапазоне.

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

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

Ответ 1

Это особенность, которую мы просим в угловых... читать это: 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);
}

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

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

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