角度指示出力出力、親が更新されない

Question

私は角度成分を持っています。これは実際にはブートストラップパネルです。テンプレートと

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> 

とディレクティブは、ブートストラップ崩壊イベント（jqueryの）を検出し、それらにcollapseStatus($event)の私のコンポーネントを伝搬するcollapseControl呼ば：

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

すべてが正常に動作し、イベントは親に伝播され、イベントに応じてthis.activeが設定されますが、UIは更新されません（[hidden]属性の<exercise-preview/>コンポーネント）。

(collapseStatus)="toggleActive($event)"を(click)="toggleActive($event)"に変更するだけで問題ありません。これは角度変化の検出で何かをしなければならないが、私が間違っていることを理解することはできない。

Answer 1

Angularは、zone内で発生していないので、Observable.fromEventサブスクリプションを通じて行われた変更を認識していません。 NgZoneを使用すると、ゾーン内でコードを実行できます。例：

import { NgZone } from '@angular/core'; 

// ... 

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

ng-bootstrap、可能であれば、折り畳み式などで作業するときに角のような経験を増やすために