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

Question

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

У меня есть директива 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, но при вводе мышью у него будет директива md-tooltip в span.

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

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

Answer 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();
    }
}

Answer 2

Похоже, это будет в Angular 15.

См.: https://www.angularjswiki.com/angular/directive-composition-api-in-angular-15/ .