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

Я видел здесь два вопроса, как условно добавлять и удалять атрибуты для элемента (Is it possible to conditionally display element attributes using 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; 
    } 
}

Edit: есть пара ответов, но они для AngularJS (1)

источник

2016-05-27 Denko Mancheski

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

источник

2016-05-27 18:03:48

есть ли способ, как заставить угловой перекомпилировать этот элемент как-то применить его? или есть ли другой способ, как это сделать? Мне это не нужно прямо сейчас, но мне было просто любопытно –

Не настолько, насколько мне известно. Что вы можете сделать, так это добавить один элемент и один без селектора директив и использовать 'ngIf' для переключения, который следует добавить/удалить из DOM. –

@ GünterZöchbauer вы можете взглянуть на мой вопрос, может быть, у вас есть идея http://stackoverflow.com/questions/37489029/how-can-i-get-the-value-from-json-url – Abderrahim

-1

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

И еще: Angular 2 equivalent of ng-bind-html, $sce.trustAsHTML(), and $compile?

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

источник

2016-05-28 02:50:18

Вот мой прецедент: я использую Bootstrap. Я создал компонент для ввода текста, так что мне не нужно создавать обертку div ('.form-group') и метку для ввода текста, и вместо этого можно использовать только одну строку для каждого ввода текста, передавая метку как' @Input() 'компоненту. Я также создал CurrencyDirective для форматирования ввода в качестве валюты.Теперь я хочу иметь возможность установить эту директиву на одном из моих текстовых входов, но мне нужно будет передать флаг в компонент ввода текста, который указывает, следует ли добавить директиву в элемент '' в компоненте. – Travesty3

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

в директиве:

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

в DOM:

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

источник

2017-07-28 11:03:12

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

ответ

Смежные вопросы