Question

当我从指令执行emit时，我试图改变一些值;

简化版：

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时，我没有数据+警报'值：TEST'

任何知道这两种方法之间有什么区别的人，以及为什么Angular在发光时没有检测到这种值的变化，但在点击时会这样做？

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

  }
}

Answer 2

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

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

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

2 个答案: