发射无变化检测（Angular 2）

Question

I am trying to get some values to change when I execute an emit from a directive;

Simplified version:

HTML:

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

TypeScript:

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);
    }
}

When I press the 'get data' link, I get the data + an alert 'Value: TEST' When I emit the onTouch, I get no data + an alert 'Value: TEST'

Anyone who knows what the difference between these two methods is and why Angular does not detect this change in value when emitting, but does when clicking?

Answer 1

I think @Output is only between parent and child. You can use a subject to communicate between directive and its host.

@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

通过在我的更改中添加zone.run解决了这个问题：

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