Pas de détection de changement sur Emit (Angular 2)

Question

J'essaye de faire changer certaines valeurs quand j'exécute un emit d'une directive;

Version simplifiée:

HTML:

<div testDirective (onTouch)='test()'> 
    <p>{{test_value}}</p> 
    <a (click)='test()'>get data</a> 
</div> 

tapuscrit:

private test_value: string = ''; 

test() { 
    this.test_value='TEST'; 
    alert('Value: ' + this.test_value); 
} 

directive:

@Directive({ 
selector: '[testDirective]', 
host: { 
     '(document:touchend)': 'touchEnd($event)' 
    } 
}) 

export class TestDirective { 
    @Output() onTouch: EventEmitter<any> = new EventEmitter(); 
    touchEnd(e) { 
     this.onTouch.emit(null); 
    } 
} 

Lorsque j'appuie sur le lien 'obtenir des données', j'obtiens les données + une alerte 'Valeur: TEST' Lorsque j'émets l'onTouch, je n'obtiens aucune donnée + une alerte 'Valeur: TEST'

Toute personne qui sait ce que différence entre ces deux méthodes est et pourquoi Angular ne détecte pas ce changement de valeur lors de l'émission, mais fait en cliquant?

Answer 1

Je pense que @Output est seulement entre parent et enfant. Vous pouvez utiliser un sujet pour communiquer entre la directive et son hôte.

@Directive({ 
    selector: '[myDir]' 
}) 
export class MyDir { 
    @Input() myDir; 

    @HostListener('click', ['$event.target']) onClick() { 
    this.myDir.next(true); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>isClicked: {{obs | async}}</h2> 
     <div [myDir]="subject">Click me</div> 
    </div> 
    `, 
}) 
export class App { 
    subject = new BehaviorSubject(false); 
    obs = this.subject.asObservable(); 

    constructor() { 

    } 
} 

Answer 2

a résolu le problème en ajoutant un zone.run à mon changement:

zone.run(() => this.test_value = 'TEST');