Angular 2 addizionalmente aggiunge direttive attributo

Ho visto qui due domande su come aggiungere e rimuovere condizionatamente attributi su un oggetto (Is it possible to conditionally display element attributes using Angular2?) ma la mia domanda è se è possibile aggiungere e rimuovere le direttive di attributo ? Sono in grado di aggiungere e rimuovere l'attributo, ma Angular non "compila" l'attributo come una direttiva di attributo, ma l'attributo si trova semplicemente lì senza fare nulla. Ecco un esempio di 2 tag:Angular 2 addizionalmente aggiunge direttive attributo

Il primo è quello che sto cercando di applicare in modo condizionale la direttiva attributo e il secondo ha tutto il tempo.

Ecco la gif:

Ecco come Mi candido l'attributo (forse c'è un modo diverso di applicazione della direttiva attributo?)

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

E qui è la direttiva:

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: ci sono risposte coppia ma lo sono per AngularJS (1)

fonte

2016-05-27 Denko Mancheski

Questo non è supportato. Le direttive vengono applicate solo quando l'HTML statico corrisponde al selettore.

fonte

2016-05-27 18:03:48

esiste un modo come forzare angolare di ricompilare quell'elemento in qualche modo di applicarla? o c'è un modo diverso come farlo? Non ne ho bisogno in questo momento, ma ero solo curioso –

Non per quanto ne so. Quello che puoi fare è aggiungere un elemento con e uno senza il selettore di direttiva e usare 'ngIf' per cambiare quale deve essere aggiunto/rimosso dal DOM. –

@ GünterZöchbauer puoi per favore dare un'occhiata alla mia domanda forse hai un'idea http://stackoverflow.com/questions/37489029/how-can-i-get-the-value-from-json-url – Abderrahim

-1

Quindi prima è possibile ricompilare un componente con $ scope con $ compile() ma non in angular2. È possibile compilare in fase di esecuzione di un nuovo componente, ecco un buon SO con alcuni modi con dynamicComponentLoader: Equivalent of $compile in Angular 2

E un altro: Angular 2 equivalent of ng-bind-html, $sce.trustAsHTML(), and $compile?

La domanda che ho è quello che è il caso d'uso in cui si attiva direttive? Non riesco a pensare del perché vorrei ma io sono curioso che cosa il vostro bisogno è .. Per la maggior parte delle cose ngIf, ngSwitch, ecc lavoro per me mentre la commutazione ..

fonte

2016-05-28 02:50:18

Ecco il mio caso d'uso: sto usando Bootstrap Ho creato un componente per gli input di testo in modo da non dover creare il wrapper div ('.form-group') e l'etichetta per l'input di testo, e può invece usare solo una riga per ogni input di testo, passando l'etichetta come' @Input() 'al componente. Ho anche creato una CurrencyDirective per formattare l'input come valuta.Ora voglio essere in grado di impostare quella direttiva su uno dei miei input di testo, ma dovrei passare un flag nel componente di input del testo che indica se la direttiva debba o meno essere aggiunta all'elemento '' nel componente. – Travesty3

Si potrebbe passare una bandiera per la direttiva

nella direttiva:

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

In DOM:

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

fonte

2017-07-28 11:03:12

Angular 2 addizionalmente aggiunge direttive attributo

risposta

Problemi correlati