Подтвердить что ты не робот

Angular 2 условно добавить директивы атрибута

Я видел здесь два вопроса, как условно добавлять и удалять атрибуты элемента (Можно ли условно отображать атрибуты элемента с помощью Angular2?), но мой вопрос в том, можно ли добавлять и удалять директивы атрибутов ? Я могу добавить и удалить атрибут, но Angular не "компилирует" атрибут как директиву атрибута, но атрибут просто сидит там, ничего не делая. Вот пример из 2 тегов:

Первый - это тот, который я пытаюсь условно применить директиву атрибута, а второй - все это время.

Вот gif: введите описание изображения здесь

Вот как я применяю атрибут (возможно, есть другой способ применения директивы атрибута?)

<h1 [attr.colored]="check ? '': null">Testing something</h1>

И вот директива:

import {Directive, ElementRef} from '@angular/core'
@Directive({
    selector: '[colored]',
    host: {
        '(mouseenter)': 'onMouseEnter()',
        '(mouseleave)': 'onMouseLeave()'
    }
})

export class colorDirective {
    constructor(private el: ElementRef) {
    }
    onMouseEnter() { this.highlight("yellow"); }
    onMouseLeave() { this.highlight(null); }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

Изменить: есть несколько ответов, но они предназначены для AngularJS (1)

4b9b3361

Ответ 1

Это не поддерживается. Директивы применяются только тогда, когда статический HTML соответствует селектору.

Ответ 2

Вы можете передать флаг в директиву

В директиве:

ngAfterViewInit()
{
  let tooltip = this.tooltip instanceof Object ? this.tooltip : {disabled: this.tooltip};
  if (!tooltip.disabled) {
    //DO STUFF
  }
}

В DOM:

<span [tooltip]="{disabled: true}"></span>

Ответ 3

Итак, прежде чем вы могли бы перекомпилировать компонент, ему принадлежит $scope с $compile(), но он не находится в angular2. Вы можете скомпилировать во время выполнения NEW компонент, здесь хороший SO с несколькими способами с dynamicComponentLoader: Эквивалент компиляции $в Angular 2

И еще: Angular 2 эквивалента ng-bind-html, $sce.trustAsHTML() и $compile?

Вопрос, который у меня есть, - это пример использования директив переключения? Я не могу придумать, почему я хотел бы, но мне любопытно, что вам нужно. Для большинства вещей ngIf, ngSwitch и т.д. Работают для меня при переключении.