发射时没有变化检测（Angular 2）答案

【问题标题】：No change detection on emit (Angular 2)发射时没有变化检测（Angular 2）
【发布时间】：2017-04-24 14:10:12
【问题描述】：

当我从指令执行发射时，我试图改变一些值；

简化版：

HTML：

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

打字稿：

private test_value: string = '';

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

指令：

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

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

当我按下“获取数据”链接时，我得到了数据 + 一个警报“值：测试” 当我发出 onTouch 时，我没有收到任何数据 + 警报“值：测试”

谁知道这两种方法之间的区别是什么，以及为什么 Angular 在发射时不会检测到这种值的变化，但在点击时会检测到？

【问题讨论】：

标签： angular typescript directive eventemitter

【解决方案1】：

我认为@Output 只在父母和孩子之间。您可以使用主题在指令与其宿主之间进行通信。

@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() {

  }
}

【讨论】：

输出应该在指令上工作，因为在它被调用的那一刻，它是所用组件的一个实例。它确实执行代码并更改数据，只是不会触发更改检测..

【解决方案2】：

通过在我的更改中添加 zone.run 来解决它：

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

【讨论】：