Angular 2.4.0 Target NgClass innerhalb der Attribut-Direktive

Question

Wie würde ich bei der Verwendung von NgClass innerhalb einer benutzerdefinierten Attribut-Direktive vorgehen, um die CSS-Klasse der Hauptelemente zu ändern?

Wenn ich so etwas wie diese:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <div class="box" myDir [ngClass]="{'blue': blue, 'red': red}"> </div> 
    </div> 
    `, 
}); 

Und dann innerhalb dieser myDir Richtlinie, etwa so:

import { Directive, HostListener, OnInit } from '@angular/core'; 

@Directive({ 
    selector: '[myDir]' 
}) 

export class MyDirDirective { 
    blue: boolean; 
    red: boolean; 

    constructor() { 
    } 

    ngOnInit() { 
    } 

    @HostListener('mouseenter', ['$event']) 
    onMouseEnter(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    this.blue = true; 
    this.red = false; 

    console.log('mouseenter'); 
    } 

    @HostListener('mouseleave', ['$event']) 
    onMouseLeave(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    this.blue = true; 
    this.red = false; 

    console.log('mouseleave'); 
    } 

Habe ich keinen Zugriff auf den Umfang, in der blauen und Rot wohnen in? Wenn ich einen Toggle erzeuge, kann ich diese Werte mit einer Schaltfläche aktualisieren, aber es scheint nicht so, als könnte ich es aus der Direktive heraus tun. Ist das eine genaue Beobachtung und sollte ich es so machen oder gibt es eine Alternative, die ich in den Dokumenten nicht sehe?

Answer 1

Eigenschaften blue\red in Ihrem Fall befinden sich im Bereich der Mutterkomponente my-app.

können Sie ein Ausgabeereignis in Ihrer Richtlinie schaffen, die in der übergeordneten Komponente gezeichnet werden können, um den Wert zu ändern,

Etwas ähnliches wie unten,

@Directive({ 
    selector: '[myDir]' 
}) 
export class MyDirDirective { 
    blue: boolean; 
    red: boolean; 

    @Output() myEvent = new EventEmitter(); 

    @HostListener('mouseenter', ['$event']) 
    onMouseEnter(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    this.myEvent.next('blue'); 
    } 

    @HostListener('mouseleave', ['$event']) 
    onMouseLeave(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    this.myEvent.next('red'); 
    } 
} 

und zu diesem Ereignis in übergeordnete Komponente abonnieren um die Farbe auf blue\red zu aktualisieren.

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello {{name}}</h1> 
    <div class="box" myDir (myEvent)="myEvent($event)" 
     [ngClass]="{'blue': color === 'blue', 'red': color === 'red'}"> Hello World!!</div> 
    `, 
    styles:[` 
    .blue{ 
    border: 1px solid blue; 
    } 
    .red{ 
    border: 1px solid red; 
    }`] 
}) 
export class AppComponent { 
    name = 'Angular'; 
    color = 'blue'; 

    myEvent(val){ 
    this.color = val; 
    } 
} 

prüfen diese Plunker!!

hoffe, das hilft !!