Jquery 角度指令发射输出，父级未更新

我有一个角度组件，它实际上是一个引导面板

export class ExerciseComponent implements OnInit {
  @Input() exercise:Exercise;
  @Input() index:number;
  @Input() first:boolean;
  @Input() last:boolean;
  @Input() active:boolean;
  @Input() selected:boolean;
  constructor(private data:ApiDataService, private route:ActivatedRoute) {
  }

  toggleActive(e){
    let show = (e.type=='show');
    this.active = show;
  }
}

使用模板：

<div class="panel-heading">
  <div>
    <h5 class="panel-title">
      <a data-toggle="collapse" data-parent="#accordionexercises"
         class="accordion-link" href="#collapse{{ exercise.id }}">
        {{ exercise.title }} </a>
    </h5>
    <div class="pull-right">
      <i *ngFor="let n of exercise.difficulty | fill" class="fa fa-star"></i>
    </div>
  </div>
  <exercise-preview [hidden]="active" [e]="exercise"></exercise-preview>
</div>
<div id="collapse{{ exercise.id }}" [ngClass]="{'panel-collapse collapse':true, 'in':selected}"
     collapseControl (collapseStatus)="toggleActive($event)">
  <div class="panel-body">
    <div class="row">
      <div class="col-md-12">
        <div *ngIf="exercise.image" class="pull-right">
          <img src="http://localhost:8000{{ exercise.image.file }}"/>
        </div>
        <div [innerHtml]="exercise.exText"></div>
      </div>
    </div>
  </div>
</div>

一切正常，事件被传播到父级，

this.active

是根据事件设置的，但UI没有更新（请注意

组件上的

[hidden]

属性）

---

如果我简单地将

（collapseStatus）=“toggleActive（$event）”

更改为

（单击）=“toggleActive（$event）”

一切正常。这与角度变化检测有关，但我不知道我做错了什么

Angular不知道通过

Observable.fromEvent

订阅所做的更改，因为这不会在一个时间内发生。可以使用在区域内运行代码。e、 g:

从'@angular/core'导入{NgZone}；
// ...
建造商（el:ElementRef，ngZone:ngZone）{
this.collapseStatus=新的EventEmitter（）；
可观察
.fromEvent（$（el.nativeElement），'hide.bs.collapse show.bs.collapse'）
.订阅（e=>{
run（（）=>this.collapseStatus.emit（e））；
});
}

---

例如，如果可以的话，您最好使用jquery，以便在处理可折叠物体等时获得更具角度感的体验。

jquery标记是否与问题相关？是的，我使用jquery捕获引导事件谢谢您的回答Kirk。我知道angular不知道可观察的

。fromEvent

，但我认为，它知道实际发出信号的EventEmitter，并且值在

TogleActive

处理程序中更新，该处理程序基本上与原始事件无关。你能解释一下吗？是的，它知道

EventEmitter

，但没有变化检测的意义。通常，

emit

是从一个区域内调用的（例如，在XHR或DOM事件之后），但是当这些事件发生时，Angular没有神奇的监听功能，特别是-它通常“起作用”，因为导致

emit

的操作在一个区域内。@MartinM，您可以在中了解事件处理和更改检测的分离

@Directive({
  selector: '[collapseControl]'
})
export class CollapseControlDirective{
  @Output() collapseStatus: EventEmitter<any>;

  constructor(el: ElementRef) {
    this.collapseStatus = new EventEmitter();
    Observable
      .fromEvent($(el.nativeElement), 'hide.bs.collapse show.bs.collapse')
      .subscribe(e=> this.collapseStatus.emit(e));
  }
}